从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