在前端开发中，图标是不可或缺的UI元素。本文介绍了如何利用iconfont图标库，并封装一个灵活易用的React Icon组件。

1.为什么选择iconfont？

iconfont是阿里巴巴提供的矢量图标管理平台，具有以下优势：

• 海量图标资源

• 支持自定义图标上传

• 多种使用方式（Unicode/Font class/Symbol）

• 支持多色图标

2.封装Icon组件

下面是我们将要封装的Icon组件代码：

import React from "react";

interface IconProps extends React.HTMLAttributes<HTMLElement> {
  theme: string;
  size?: number | string;
  color?: string;
}

const Icon: React.FC<IconProps> = ({
  theme,
  size = 24,
  color = "#333",
  className = "",
  ...rest
}) => {
  const iconClass = `ic ic-${theme} ${className}`;
  const iconStyle = {
    fontSize: `${size}px`,
    color,
  };
  return <i className={iconClass} style={iconStyle} {...rest} />;
};

export default Icon;

3.组件设计解析

​类型定义：使用TypeScript定义组件props，包括：

• theme：必填，指定图标类型

• size：可选，默认24px

• color：可选，默认#333

• 继承所有HTML属性

​样式处理：

• 通过className组合图标类名

• 使用内联样式控制大小和颜色

​灵活性：

• 支持自定义类名

• 支持所有i标签的HTML属性

4.使用iconfont前的准备

1. 在iconfont官网创建项目并添加图标

2. 选择"Font class"方式，

3. 指定类前缀为 ic

4. 下载代码并引入项目中的 iconfont.css

5.如何使用封装好的Icon组件

import Icon from '@/components/icon';

export default function IconTest() {
  return (
    <div
      style={{
        padding: '100px',
        border: '1px solid red',
      }}
    >
      {/* 基本用法 */}
      <Icon theme="home" />
      {/* 自定义大小和颜色 */}
      <Icon theme="search" size={32} color="#ff0000" />
      {/* 添加额外类名和事件 */}
      <Icon
        theme="user"
        className="custom-icon"
        onClick={() => console.log('clicked')}
      />
    </div>
  );
}