当前位置：首页 > React

react实现icon的列表

2026-01-27 19:06:19React

使用 React 实现 Icon 列表

使用第三方图标库（如 Font Awesome）

安装 Font Awesome 库：

npm install @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome

在组件中引入并使用：

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCoffee, faUser, faHome } from '@fortawesome/free-solid-svg-icons';

function IconList() {
  const icons = [
    { icon: faCoffee, name: 'Coffee' },
    { icon: faUser, name: 'User' },
    { icon: faHome, name: 'Home' }
  ];

  return (
    <div>
      {icons.map((item, index) => (
        <div key={index}>
          <FontAwesomeIcon icon={item.icon} />
          <span>{item.name}</span>
        </div>
      ))}
    </div>
  );
}

使用 SVG 图标

将 SVG 图标作为组件导入：

function IconList() {
  const icons = [
    { component: <CoffeeIcon />, name: 'Coffee' },
    { component: <UserIcon />, name: 'User' },
    { component: <HomeIcon />, name: 'Home' }
  ];

  return (
    <div>
      {icons.map((item, index) => (
        <div key={index}>
          {item.component}
          <span>{item.name}</span>
        </div>
      ))}
    </div>
  );
}

使用 CSS 图标（如 Material Icons）

在 HTML 中引入 Material Icons：

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

在 React 组件中使用：

function IconList() {
  const icons = [
    { name: 'Coffee', icon: 'local_cafe' },
    { name: 'User', icon: 'person' },
    { name: 'Home', icon: 'home' }
  ];

  return (
    <div>
      {icons.map((item, index) => (
        <div key={index}>
          <span className="material-icons">{item.icon}</span>
          <span>{item.name}</span>
        </div>
      ))}
    </div>
  );
}

自定义图标组件

创建可复用的图标组件：

function CustomIcon({ name, color = 'black', size = 24 }) {
  const iconStyle = {
    fill: color,
    width: size,
    height: size
  };

  return (
    <svg style={iconStyle}>
      {/* SVG 路径或其他图形 */}
    </svg>
  );
}

function IconList() {
  const icons = [
    { name: 'Coffee', icon: 'coffee' },
    { name: 'User', icon: 'user' },
    { name: 'Home', icon: 'home' }
  ];

  return (
    <div>
      {icons.map((item, index) => (
        <div key={index}>
          <CustomIcon name={item.icon} />
          <span>{item.name}</span>
        </div>
      ))}
    </div>
  );
}

响应式图标列表

使用 CSS Grid 或 Flexbox 布局：

react实现icon的列表

function IconList() {
  const icons = [
    { icon: faCoffee, name: 'Coffee' },
    { icon: faUser, name: 'User' },
    { icon: faHome, name: 'Home' }
  ];

  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(100px, 1fr))', gap: '16px' }}>
      {icons.map((item, index) => (
        <div key={index} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
          <FontAwesomeIcon icon={item.icon} size="2x" />
          <span>{item.name}</span>
        </div>
      ))}
    </div>
  );
}