多源导入语法问题：尝试统一导入不同来源图标报错

嘿，这问题我熟！把不同来源的图标统一用Icons别名来调用确实能让代码更整洁，我给你分几种常见场景讲正确的实现方式：

场景1：从单个图标库导入所有/多个图标 #

如果是从同一个库（比如Material UI Icons）导入多个图标，直接用import * as Icons就能把整个库的图标都挂载到Icons别名下：

// 导入整个Material UI图标库，所有图标都通过Icons访问
import * as Icons from '@mui/icons-material';

// 使用示例
<Icons.Home />
<Icons.Settings />

这种方式的好处是不用一个个单独导入，缺点是可能会打包进未使用的图标，如果需要树摇优化，就看下面的场景2。

场景2：从多个不同库导入指定图标，统一整合为Icons #

如果你的图标来自多个库（比如同时用Material UI和Ant Design Icons），推荐创建一个统一的图标导出文件，把所有需要的图标都整合到Icons对象里：

第一步：创建图标整合文件（比如src/icons/index.js） #

// 从Material UI导入需要的图标
import { Home, Settings } from '@mui/icons-material';
// 从Ant Design导入需要的图标
import { UserOutlined, SearchOutlined } from '@ant-design/icons';

// 把所有图标统一放到Icons对象里，还可以给图标重命名让调用更直观
export const Icons = {
  // Material UI图标
  Home,
  Settings,
  // Ant Design图标，重命名去掉Outlined后缀
  User: UserOutlined,
  Search: SearchOutlined
};

第二步：在组件中导入使用 #

import { Icons } from '../icons';

// 使用示例
<Icons.Home />
<Icons.User />

这种方式既能按需导入（支持树摇），又能统一调用入口，最适合多来源图标的场景。

场景3：TypeScript项目中的类型安全版本 #

如果用TypeScript，给Icons加上类型定义能让编辑器提供更好的智能提示：

// src/icons/index.ts
import { Home as HomeIcon, Settings as SettingsIcon } from '@mui/icons-material';
import { UserOutlined, SearchOutlined } from '@ant-design/icons';

// 定义图标的类型
type AppIcons = {
  Home: typeof HomeIcon;
  Settings: typeof SettingsIcon;
  User: typeof UserOutlined;
  Search: typeof SearchOutlined;
};

// 导出类型安全的Icons对象
export const Icons: AppIcons = {
  Home: HomeIcon,
  Settings: SettingsIcon,
  User: UserOutlined,
  Search: SearchOutlined
};

导入使用和JS版本一样，而且编辑器会自动提示所有可用的图标名称~

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