动态获取图标

GPAdmin 提供了 IconDisplay 组件和 getIconComponent 辅助函数，用于根据图标名称动态获取并显示 Ant Design 图标组件。

快速开始

在管理后台中，图标的名称通常存储在数据库中，需要根据字符串名称动态渲染对应的图标组件。IconDisplay 组件和 getIconComponent 函数提供了这种动态获取图标的能力。

图标库：@ant-design/icons

IconDisplay 组件

基本用法

IconDisplay 是一个 React 组件，用于根据图标名称自动渲染对应的图标。

文件位置：src/components/IconDisplay/index.tsx

tsx

import { IconDisplay } from '@/components';

// 基本使用
<IconDisplay iconName="AppstoreOutlined" />

// 自定义大小和样式
<IconDisplay 
  iconName="SettingOutlined" 
  fontSize={24}
  style={{ color: '#1890ff' }}
/>

// 在表格中使用
<IconDisplay iconName={record.menu_icon} />

Props

属性	类型	默认值	说明
iconName	`string \| null \| undefined`	-	图标名称，如 'AppstoreOutlined'
fontSize	`number`	`18`	图标大小（像素）
style	`React.CSSProperties`	-	自定义样式对象

使用示例

在表格列中显示图标

tsx

import { ProColumns } from '@ant-design/pro-components';
import { IconDisplay } from '@/components';

const columns: ProColumns<any>[] = [
  {
    title: '图标',
    dataIndex: 'menu_icon',
    hideInSearch: true,
    width: 60,
    render: (_, record) => (
      <IconDisplay iconName={record.menu_icon} />
    ),
  },
  // ... 其他列
];

在表单中使用

tsx

import { IconDisplay } from '@/components';

const MenuForm: React.FC = () => {
  const [iconName, setIconName] = useState('AppstoreOutlined');

  return (
    <Form>
      <Form.Item label="图标预览">
        <IconDisplay 
          iconName={iconName} 
          fontSize={32}
        />
      </Form.Item>
      {/* 其他表单项 */}
    </Form>
  );
};

条件渲染

tsx

import { IconDisplay } from '@/components';

const MyComponent: React.FC<{ icon?: string }> = ({ icon }) => {
  return (
    <div>
      {icon && <IconDisplay iconName={icon} />}
      <span>标题</span>
    </div>
  );
};

注意事项

图标名称格式：图标名称必须是 @ant-design/icons 中导出的组件名称，如 AppstoreOutlined、SettingOutlined 等。
无效图标处理：如果图标名称不存在或无效，组件会返回 null，不会渲染任何内容，也不会报错。
性能优化：组件内部会对图标进行验证，确保只渲染有效的 React 组件。

getIconComponent 函数

如果只需要获取图标组件而不需要直接渲染，可以使用 getIconComponent 辅助函数。

文件位置：src/components/IconDisplay/getIconComponent.ts

函数签名

typescript

export const getIconComponent = (
  iconName: string | null | undefined,
): React.ComponentType<any> | null

使用示例

获取图标组件

tsx

import { getIconComponent } from '@/components/IconDisplay/getIconComponent';

const iconName = 'AppstoreOutlined';
const IconComponent = getIconComponent(iconName);

if (IconComponent) {
  // 使用图标组件
  return <IconComponent style={{ fontSize: 20 }} />;
}

在菜单中使用

tsx

import { getIconComponent } from '@/components/IconDisplay/getIconComponent';

const menuData = menuItems.map(item => {
  const IconComponent = getIconComponent(item.icon);
  
  return {
    ...item,
    icon: IconComponent ? React.createElement(IconComponent) : undefined,
  };
});

条件渲染

tsx

import { getIconComponent } from '@/components/IconDisplay/getIconComponent';

const MyIcon: React.FC<{ iconName?: string }> = ({ iconName }) => {
  const IconComponent = getIconComponent(iconName);
  
  if (!IconComponent) {
    return null;
  }
  
  return <IconComponent />;
};

返回值

返回图标组件：如果图标名称有效，返回对应的 React 组件类型
返回 null：如果图标名称无效、为空或不存在，返回 null

图标名称规范

命名规则

Ant Design Icons 的图标名称遵循以下规则：

Outlined 图标：以 Outlined 结尾，如 AppstoreOutlined、SettingOutlined
Filled 图标：以 Filled 结尾，如 AppstoreFilled、SettingFilled
TwoTone 图标：以 TwoTone 结尾，如 AppstoreTwoTone、SettingTwoTone

常用图标列表

图标名称	说明
`AppstoreOutlined`	应用商店
`SettingOutlined`	设置
`UserOutlined`	用户
`MenuOutlined`	菜单
`DashboardOutlined`	仪表盘
`TeamOutlined`	团队
`FileTextOutlined`	文件
`FolderOutlined`	文件夹

更多图标请参考 Ant Design Icons 官方文档。

实现原理

IconDisplay 组件实现

tsx

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

const IconDisplay: React.FC<IconDisplayProps> = ({ iconName, fontSize = 18, style }) => {
  if (!iconName || typeof iconName !== 'string') {
    return null;
  }

  // 从 @ant-design/icons 中动态获取图标组件
  const IconComponent = (Icons as any)[iconName];

  if (IconComponent) {
    // 检查是否是有效的 React 组件
    const isReactComponent =
      typeof IconComponent === 'function' ||
      (typeof IconComponent === 'object' &&
        IconComponent !== null &&
        '$$typeof' in IconComponent);

    if (isReactComponent) {
      return React.createElement(IconComponent, {
        style: { fontSize, ...style },
      });
    }
  }

  return null;
};

getIconComponent 函数实现

typescript

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

export const getIconComponent = (
  iconName: string | null | undefined,
): React.ComponentType<any> | null => {
  if (!iconName || typeof iconName !== 'string') {
    return null;
  }

  const IconComponent = (Icons as any)[iconName];

  if (IconComponent) {
    const isReactComponent =
      typeof IconComponent === 'function' ||
      (typeof IconComponent === 'object' &&
        IconComponent !== null &&
        '$$typeof' in IconComponent);

    if (isReactComponent) {
      return IconComponent as React.ComponentType<any>;
    }
  }

  return null;
};

关键点说明

动态导入：使用 import * as Icons from '@ant-design/icons' 导入所有图标组件，然后通过属性访问获取对应的图标。
类型检查：由于 @ant-design/icons 使用 React.forwardRef 创建图标组件，这些组件是对象类型而非函数类型，因此需要特殊检查（'$$typeof' in IconComponent）。
错误处理：如果图标名称无效或不存在，函数和组件都会优雅地返回 null，不会抛出错误。

最佳实践

1. 图标名称存储

建议在数据库中将图标名称存储为字符串：

typescript

// 数据库字段
menu_icon: 'AppstoreOutlined'

// 使用
<IconDisplay iconName={record.menu_icon} />

2. 默认值处理

tsx

<IconDisplay 
  iconName={record.menu_icon || 'FileOutlined'} 
/>

3. 图标选择器

可以结合图标选择器组件，让用户选择图标：

tsx

import { IconDisplay } from '@/components';

const IconSelector: React.FC = () => {
  const [selectedIcon, setSelectedIcon] = useState('AppstoreOutlined');
  
  const iconList = ['AppstoreOutlined', 'SettingOutlined', 'UserOutlined'];
  
  return (
    <div>
      <div>当前选择：</div>
      <IconDisplay iconName={selectedIcon} fontSize={32} />
      
      <div>
        {iconList.map(icon => (
          <div 
            key={icon}
            onClick={() => setSelectedIcon(icon)}
          >
            <IconDisplay iconName={icon} />
          </div>
        ))}
      </div>
    </div>
  );
};

4. 性能优化

如果需要在大量数据中渲染图标，建议：

使用 React.memo 包装组件
确保图标名称稳定，避免不必要的重新渲染
对于列表，考虑使用虚拟滚动

tsx

const MemoizedIconDisplay = React.memo(IconDisplay);

常见问题

Q: 图标不显示怎么办？

A: 检查以下几点：

图标名称是否正确（区分大小写）
图标名称是否包含完整的后缀（如 Outlined）
是否已经安装了 @ant-design/icons 包

Q: 可以使用自定义图标吗？

A: 当前实现仅支持 @ant-design/icons 中的图标。如果需要使用自定义图标，可以：

直接导入自定义图标组件
扩展 getIconComponent 函数支持自定义图标映射

Q: 如何获取所有可用图标列表？

A: 可以通过以下方式查看：

typescript

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

// 获取所有图标名称
const iconNames = Object.keys(Icons);
console.log(iconNames);

动态获取图标 ​

快速开始 ​

IconDisplay 组件 ​

基本用法 ​

Props ​

使用示例 ​

在表格列中显示图标 ​

在表单中使用 ​

条件渲染 ​

注意事项 ​

getIconComponent 函数 ​

函数签名 ​

使用示例 ​

获取图标组件 ​

在菜单中使用 ​

条件渲染 ​

返回值 ​

图标名称规范 ​

命名规则 ​

常用图标列表 ​

实现原理 ​

IconDisplay 组件实现 ​

getIconComponent 函数实现 ​

关键点说明 ​

最佳实践 ​

1. 图标名称存储 ​

2. 默认值处理 ​

3. 图标选择器 ​

4. 性能优化 ​

常见问题 ​

Q: 图标不显示怎么办？ ​

Q: 可以使用自定义图标吗？ ​

Q: 如何获取所有可用图标列表？ ​

相关文档 ​

动态获取图标

快速开始

IconDisplay 组件

基本用法

Props

使用示例

在表格列中显示图标

在表单中使用

条件渲染

注意事项

getIconComponent 函数

函数签名

使用示例

获取图标组件

在菜单中使用

条件渲染

返回值

图标名称规范

命名规则

常用图标列表

实现原理

IconDisplay 组件实现

getIconComponent 函数实现

关键点说明

最佳实践

1. 图标名称存储

2. 默认值处理

3. 图标选择器

4. 性能优化

常见问题

Q: 图标不显示怎么办？

Q: 可以使用自定义图标吗？

Q: 如何获取所有可用图标列表？

相关文档