從 vue js 的 Icons 文件夾中導入所有不同的圖標文件

Question

我想從 Icons 文件夾中導入所有圖標文件，有沒有更好的方法來做到這一點。

文件夾結構：

 icon/icons/
             homeIcon.js
             BarIcon.js
             ArrowIcon.js
             ArrowUpIcon.js
             ArrowDownIcon.js
             .....

然后以這種方式導入它：

import { icons } from "../icon/icons";

然后在導入所有文件后，我想將它們保存在這樣的變量中：

const allIcons = { type: "select", options: Object.keys(icons) };

然后在模板中顯示或循環播放。 有沒有更好的方法來做到這一點，因為上述方法對我不起作用。 任何幫助深表感謝 ！ 謝謝！

Answer 1

在導出所有文件的位置創建/icon/icons/index.js ：

export * as home from `./homeIcon`;
...

或 -> 取決於您的圖標文件導出

export { default as home } from `./homeIcon`;
...

然后：

import * as icons from "../icon/icons"; /* loads your index.js containing  all the subfile modules */
// handle your module object 'icons' how you want