如何在React中合理管理大量Icon组件？

方案1：图标映射表替代switch语句 #

用对象映射表替代switch，代码更简洁，新增图标仅需在映射表中添加项，维护成本更低。

实现步骤： #

1. 定义图标名称枚举（TypeScript）：

export enum IconName {
  Filter = 'Filter',
  User = 'User',
  Settings = 'Settings',
  // 按需求补充其他图标名称
}

2. 创建图标映射表：

import { IconProps } from "@utils/types";
import FilterIcon from './FilterIcon';
import UserIcon from './UserIcon';
import SettingsIcon from './SettingsIcon';
// 导入所有已存在的图标组件

const iconMap: Record<IconName, React.FC<IconProps>> = {
  [IconName.Filter]: FilterIcon,
  [IconName.User]: UserIcon,
  [IconName.Settings]: SettingsIcon,
  // 新增图标直接在这里追加键值对
};

3. 封装统一Icon组件：

type UnifiedIconProps = IconProps & {
  name: IconName;
};

const Icon = ({ name, ...props }: UnifiedIconProps) => {
  const IconComponent = iconMap[name];
  if (!IconComponent) {
    console.warn(`图标 ${name} 不存在`);
    return null; // 也可返回默认占位图标
  }
  return <IconComponent {...props} />;
};

export default Icon;

方案2：自动批量导入图标（减少手动操作） #

如果使用Vite或Webpack，可以通过构建工具的批量导入能力自动生成映射表，无需手动导入每个图标组件，适合图标数量较多的场景。

Vite环境实现示例： #

import { IconProps } from "@utils/types";

// 批量导入所有图标组件（假设图标文件都在./icons目录，命名格式为[图标名]Icon.tsx）
const iconModules = import.meta.glob('./icons/*Icon.tsx');

const iconMap: Record<string, React.FC<IconProps>> = {};

// 遍历模块生成映射表
for (const path in iconModules) {
  // 从文件名提取图标名称，比如从'./icons/FilterIcon.tsx'得到'Filter'
  const iconName = path.match(/\/(\w+)Icon\.tsx$/)?.[1];
  if (iconName) {
    iconMap[iconName] = React.lazy(() => iconModules[path]);
  }
}

type UnifiedIconProps = IconProps & {
  name: string;
};

const Icon = ({ name, ...props }: UnifiedIconProps) => {
  const IconComponent = iconMap[name];
  if (!IconComponent) {
    console.warn(`图标 ${name} 不存在`);
    return null;
  }
  // 用Suspense处理懒加载，也可根据项目需求调整
  return (
    <React.Suspense fallback={null}>
      <IconComponent {...props} />
    </React.Suspense>
  );
};

export default Icon;

Webpack环境可使用require.context替代import.meta.glob，语法逻辑类似。

方案3：SVG批量转组件（长期优化方案） #

如果后续图标数量持续增长，可以将所有SVG文件统一管理，用工具批量转为React组件，再封装统一调用：

1. 安装@svgr/cli工具：

npm install @svgr/cli --save-dev

2. 在package.json添加转换脚本：

{
  "scripts": {
    "build-icons": "svgr --out-dir src/components/icons src/assets/icons"
  }
}

3. 运行脚本后，所有SVG会自动转为标准React组件，再按方案1的映射表方式封装即可。

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