Question

我想知道在这种情况下我是否可以import使用某种类型的循环来创建SVG的顺序文件，以免手动输入每个文件。

下面的代码是我正在尝试但显然： Syntax error: 'import' and 'export' may only appear at the top level。

我尝试了一个混合了一些模板文字的for循环：耸肩：

for (let i = 1; i <= 12; i++) {
   import icon${i} from './menu/icon${i}.svg';
}

如果我只是想以这种方式思考和/或noob问题，请随时告诉我这些问题 - downvote -

干杯。

Answer 1

您可以尝试require(your_path)。在这种情况下，

const icons = {}
for (let i = 1; i <= 12; i++) {
   icons[i] = require('./menu/icon${i}.svg';)
}

Answer 2

我看到你把它标记为reactjs。我认为让你的生活变得更轻松的是以反应方式做到这一点。您可以拥有一个导出svg组件数组的模块。

例如，您可以拥有一个包含index.js文件和.svg文件的菜单图标目录。

arr.map<Foo>(item => {
  return { a: item };
});

其中index.js看起来像这样：

icons
├── icon1.js
├── icon2.js
├── icon3.js
└── index.js

然后你将你的.svg文件变成这样的组件：

export * from .;

这样你可以导入你想要使用它们的组件内的icons目录，如下所示：

export default () => <svg>/* add your svg data here */</svg>;

并使用你的svg组件：

import * as icons from icons;