如何动态获取 Ant Design 的 Icon 组件

在 Ant Design 中动态获取 Icon 组件有几种方法，以下是常见的实现方式：

方法1：使用 icons 对象直接访问

import * as icons from '@ant-design/icons';

function DynamicIcon({ iconName }) {
  const IconComponent = icons[iconName];
  
  if (!IconComponent) {
    console.error(`Icon ${iconName} not found`);
    return null;
  }
  
  return <IconComponent />;
}

// 使用示例
<DynamicIcon iconName="UserOutlined" />

方法2：使用 createFromIconfontCN（适用于自定义图标）

import { createFromIconfontCN } from '@ant-design/icons';

const IconFont = createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js', // 替换为你的图标库地址
});

function DynamicIcon({ iconType }) {
  return <IconFont type={iconType} />;
}

// 使用示例
<DynamicIcon iconType="icon-user" />

方法3：使用 React.createElement

import * as icons from '@ant-design/icons';

function DynamicIcon({ iconName }) {
  return React.createElement(icons[iconName]);
}

// 使用示例
<DynamicIcon iconName="HomeOutlined" />

方法4：使用动态导入（按需加载）

import React, { useState, useEffect } from 'react';

function DynamicIcon({ iconName }) {
  const [Icon, setIcon] = useState(null);

  useEffect(() => {
    import(`@ant-design/icons/es/icons/${iconName}.js`)
      .then(module => setIcon(() => module.default))
      .catch(() => {
        console.error(`Icon ${iconName} not found`);
        setIcon(null);
      });
  }, [iconName]);

  return Icon ? <Icon /> : null;
}

// 使用示例
<DynamicIcon iconName="SettingOutlined" />

注意事项

1. 图标名称大小写：Ant Design 图标组件名称是 PascalCase（首字母大写），如 UserOutlined
2. 错误处理：总是添加错误处理，防止不存在的图标名称导致应用崩溃
3. 性能考虑：方法4的按需加载适合大型应用，可以减少初始包大小
4. TypeScript 支持：如果需要 TypeScript 类型检查，可以这样处理：

import * as icons from '@ant-design/icons';

type AntIconType = keyof typeof icons;

function DynamicIcon({ iconName }: { iconName: AntIconType }) {
  const Icon = icons[iconName];
  return Icon ? <Icon /> : null;
}

完整示例（带样式和错误处理）

import React from 'react';
import * as icons from '@ant-design/icons';
import { Space } from 'antd';

const DynamicIcon = ({ iconName, size = 20, color, style, className }) => {
  const IconComponent = icons[iconName];
  
  if (!IconComponent) {
    console.warn(`Icon "${iconName}" not found in @ant-design/icons`);
    return (
      <span 
        style={{ 
          display: 'inline-block', 
          width: size, 
          height: size, 
          backgroundColor: '#ffebee',
          color: '#f44336',
          textAlign: 'center',
          ...style 
        }}
        className={className}
      >
        ?
      </span>
    );
  }
  
  return (
    <IconComponent 
      style={{ 
        fontSize: size, 
        color, 
        ...style 
      }} 
      className={className} 
    />
  );
};

// 使用示例
const App = () => (
  <Space>
    <DynamicIcon iconName="UserOutlined" size={24} color="#1890ff" />
    <DynamicIcon iconName="SettingOutlined" />
    <DynamicIcon iconName="NonExistentIcon" /> {/* 会显示错误占位符 */}
  </Space>
);

export default App;

选择哪种方法取决于你的具体需求：

• 简单项目：方法1最直接
• 需要按需加载：方法4
• 使用自定义图标：方法2
• 需要严格类型检查：TypeScript 版本