React中如何批量导入并遍历Ant Design Icons实现图标选择器

你可以通过遍历批量导入的图标对象，动态渲染所有图标组件，无需手动编写每个图标标签。以下是完整的实现方案：

核心思路 #

@ant-design/icons的* as Icons导出是一个键为图标名称、值为ForwardRef组件的对象。我们可以通过Object.entries遍历这个对象，同时获取图标名称和对应的组件，然后动态渲染每个图标。

完整代码实现 #

import React, { useState } from 'react';
import * as Icons from '@ant-design/icons';

const IconPicker = () => {
  const [selectedIcon, setSelectedIcon] = useState(null);

  // 过滤出有效的图标组件，排除非组件类型的导出项
  const validIcons = Object.entries(Icons).filter(([_, Component]) => {
    return typeof Component === 'function' && Component.displayName;
  });

  return (
    <div style={{ 
      display: 'grid', 
      gridTemplateColumns: 'repeat(auto-fill, 60px)', 
      gap: '12px', 
      padding: '20px',
      maxHeight: '600px',
      overflowY: 'auto'
    }}>
      {validIcons.map(([iconName, IconComp]) => (
        <button
          key={iconName}
          onClick={() => setSelectedIcon(iconName)}
          style={{
            border: selectedIcon === iconName ? '2px solid #1890ff' : '1px solid #e8e8e8',
            background: selectedIcon === iconName ? '#e6f7ff' : 'transparent',
            padding: '8px',
            cursor: 'pointer',
            borderRadius: '4px',
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            gap: '4px'
          }}
        >
          <IconComp style={{ fontSize: '24px', color: '#262626' }} />
          <span style={{ fontSize: '10px', textAlign: 'center', wordBreak: 'break-all' }}>
            {iconName}
          </span>
        </button>
      ))}
    </div>
  );
};

export default IconPicker;

关键说明 #

1. 过滤有效组件：通过filter方法排除非函数类型的导出（比如可能存在的工具类或常量），确保只渲染图标组件。
2. 动态渲染组件：遍历过程中，将每个组件值作为React标签使用（如<IconComp />），这是React动态渲染组件的标准方式。
3. 状态管理：用useState记录选中的图标名称，实现选中高亮效果，方便用户选择。
4. 布局优化：采用Grid布局让图标自动排列，添加滚动条处理大量图标的显示问题，提升用户体验。

为什么之前的Object.values无效？ #

Object.values只能获取到图标组件，但无法同时拿到图标名称（用于显示和状态记录）。此外，直接使用Object.values时如果没有过滤无效项，可能会渲染非组件内容导致报错，而通过Object.entries可以同时获取名称和组件，更适合实现图标选择器的需求。

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