如何通过循环批量导入SVG文件？import语法报错求助

嘿，你的思路方向是对的，但踩了ES模块的一个核心规则——import和export必须是静态声明，不能放在循环、条件判断这类动态执行的代码块里。浏览器和打包工具需要在编译阶段就确定所有依赖关系，没法在运行时动态解析import语句，所以才会抛出那个语法错误。

下面给你几个可行的解决方案，根据你的项目环境选就行：

方案1：使用动态import()函数（通用方案） #

ES2020引入的动态import是运行时执行的，返回一个Promise，刚好适合批量导入场景。你可以把循环放在async函数里：

async function loadIcons() {
  const icons = [];
  for (let i = 1; i <= 12; i++) {
    // 动态导入每个SVG，注意模板字符串的写法
    const iconModule = await import(`./menu/icon${i}.svg`);
    // 把导入的图标存到数组里（默认导出用.default）
    icons.push(iconModule.default);
  }
  return icons;
}

// 调用函数使用图标
loadIcons().then(icons => {
  console.log('所有图标加载完成：', icons);
  // 这里可以处理图标渲染逻辑
});

方案2：用打包工具的批量导入API（Webpack/Vite专属） #

如果你的项目用Webpack或者Vite这类构建工具，它们提供了更高效的静态批量导入方式，能在编译阶段就处理所有文件：

Webpack：require.context #

// 创建一个上下文，匹配./menu下所有icon开头的SVG文件
const iconContext = require.context('./menu', false, /icon\d+\.svg$/);
const icons = {};

// 遍历所有匹配的文件路径
iconContext.keys().forEach(filePath => {
  // 从文件名里提取数字（比如icon3.svg → 3）
  const iconId = filePath.match(/icon(\d+)\.svg/)[1];
  // 导入文件并存储到对象中
  icons[`icon${iconId}`] = iconContext(filePath).default;
});

// 之后可以直接通过icons.icon1、icons.icon2访问对应图标
console.log(icons.icon5);

Vite：import.meta.glob #

Vite提供了类似的API，写法更贴近ES模块：

// 匹配所有icon开头的SVG文件
const iconModules = import.meta.glob('./menu/icon*.svg');
const icons = {};

for (const [filePath, loadModule] of Object.entries(iconModules)) {
  // 加载模块
  const module = await loadModule();
  // 提取图标编号
  const iconId = filePath.match(/icon(\d+)\.svg/)[1];
  icons[`icon${iconId}`] = module.default;
}

为什么原来的代码不行？ #

再啰嗦一句：静态import是编译时执行的，编译器不会去解析循环里的模板字符串，也不允许把import放在非顶层位置。而动态import()是运行时的函数调用，完全不受这个限制，打包工具的专属API则是通过静态分析路径来实现批量导入，也符合编译时的依赖收集要求。

内容的提问来源于stack exchange，提问作者Mehrad