使用MUI图标批量导入时出现导出未找到错误该如何解决？

问题原因 #

@mui/icons-material（或旧版@material-ui/icons）的根包并未将所有图标作为命名导出暴露，每个图标都是独立的模块文件，因此直接从根包导入命名图标会触发“export not found”的编译错误。

可行解决方案 #

方案1：保留单独导入（官方推荐） #

继续使用单独导入的写法，这是Material UI官方推荐的方式，确保编译正常且按需加载：

import InterestsRoundedIcon from "@mui/icons-material/InterestsRounded";
import AccountCircleRoundedIcon from "@mui/icons-material/AccountCircleRounded";
import SettingsRoundedIcon from "@mui/icons-material/SettingsRounded";

方案2：自定义图标导出文件 #

创建一个集中管理图标的文件，统一导入并导出所需图标，之后在组件中从该文件批量导入：

1. 创建src/icons/index.js文件：

export { default as InterestsRoundedIcon } from "@mui/icons-material/InterestsRounded";
export { default as AccountCircleRoundedIcon } from "@mui/icons-material/AccountCircleRounded";
export { default as SettingsRoundedIcon } from "@mui/icons-material/SettingsRounded";

2. 在组件中导入：

import { InterestsRoundedIcon, AccountCircleRoundedIcon, SettingsRoundedIcon } from "../icons";

方案3：使用Babel插件优化导入 #

通过babel-plugin-import插件实现语法层面的批量导入，插件会自动将其转换为符合规则的单独导入代码：

1. 安装插件：

npm install babel-plugin-import --save-dev

2. 在Babel配置文件（如babel.config.js）中添加配置：

module.exports = {
  plugins: [
    [
      'import',
      {
        libraryName: '@mui/icons-material',
        libraryDirectory: '',
        camel2DashComponentName: false,
      },
      'mui-icons',
    ],
  ],
};

配置完成后，即可使用你尝试的批量导入语法：

import { InterestsRoundedIcon, AccountCircleRoundedIcon, SettingsRoundedIcon } from "@mui/icons-material";

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