Ant Design图标系统全攻略：自定义图标与IconFont集成

Ant Design作为企业级UI设计语言和React组件库，其图标系统为开发者提供了丰富的矢量图形资源。本文将详细介绍如何充分利用Ant Design的图标系统，包括自定义SVG图标和集成IconFont资源，帮助开发者打造更具个性化的界面。

图标系统基础

Ant Design从4.0版本开始将图标系统独立为@ant-design/icons包，提供了三种主题的图标：Outlined（线性）、Filled（填充）和TwoTone（双色）。基础使用方法如下：

import { StarOutlined, StarFilled, StarTwoTone } from '@ant-design/icons';

<StarOutlined />
<StarFilled />
<StarTwoTone twoToneColor="#eb2f96" />

官方文档：components/icon/index.zh-CN.md

所有图标都以<svg>标签渲染，可以通过style和className属性设置大小和颜色：

<MessageOutlined style={{ fontSize: '16px', color: '#08c' }} />

自定义SVG图标

创建自定义SVG组件

最直接的自定义图标方式是创建SVG组件并通过Ant Design的Icon组件包装使用。以下是一个示例：

import Icon from '@ant-design/icons';

const HeartSvg = () => (
  <svg width="1em" height="1em" fill="currentColor" viewBox="0 0 1024 1024">
    <path d="M923 283.6c-13.4-31.1-32.6-58.9-56.9-82.8-24.3-23.8-52.5-42.4-84-55.5-32.5-13.5-66.9-20.3-102.4-20.3-49.3 0-97.4 13.5-139.2 39-10 6.1-19.5 12.8-28.5 20.1-9-7.3-18.5-14-28.5-20.1-41.8-25.5-89.9-39-139.2-39-35.5 0-69.9 6.8-102.4 20.3-31.4 13-59.7 31.7-84 55.5-24.4 23.9-43.5 51.7-56.9 82.8-13.9 32.3-21 66.6-21 101.9 0 33.3 6.8 68 20.3 103.3 11.3 29.5 27.5 60.1 48.2 91 32.8 48.9 77.9 99.9 133.9 151.6 92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3 56-51.7 101.1-102.7 133.9-151.6 20.7-30.9 37-61.5 48.2-91 13.5-35.3 20.3-70 20.3-103.3 0.1-35.3-7-69.6-20.9-101.9z" />
  </svg>
);

const HeartIcon = (props) => <Icon component={HeartSvg} {...props} />;

源码示例：components/icon/demo/custom.tsx

使用自定义SVG组件

创建完成后，可以像使用内置图标一样使用自定义图标：

<HeartIcon style={{ color: 'hotpink', fontSize: '24px' }} spin />

其中，spin属性可以让图标旋转，style属性可以设置大小和颜色。

通过Webpack导入SVG

如果使用webpack，可以通过配置@svgr/webpack来将SVG文件作为React组件导入：

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/,
        use: [
          {
            loader: 'babel-loader',
          },
          {
            loader: '@svgr/webpack',
            options: {
              babel: false,
              icon: true,
            },
          },
        ],
      },
    ],
  },
};

然后可以直接导入SVG文件使用：

import MessageSvg from './message.svg';
import Icon from '@ant-design/icons';

const MessageIcon = (props) => <Icon component={MessageSvg} {...props} />;

IconFont集成方案

创建IconFont组件

Ant Design提供了createFromIconfontCN方法，方便集成IconFont图标库：

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

const MyIcon = createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js', // IconFont项目生成的JS地址
});

// 使用方式
<MyIcon type="icon-example" style={{ fontSize: '24px' }} />

多图标库集成

从@ant-design/icons@4.1.0开始支持传入多个IconFont资源地址：

const MyIcon = createFromIconfontCN({
  scriptUrl: [
    '//at.alicdn.com/t/font_1.js',
    '//at.alicdn.com/t/font_2.js',
  ],
});

配置选项

createFromIconfontCN方法支持的配置选项：

参数	说明	类型	默认值
extraCommonProps	给所有的svg图标设置额外属性	{ [key: string]: any }	{}
scriptUrl	IconFont项目在线生成的js地址	string | string[]	-

高级用法

双色图标主色设置

可以通过setTwoToneColor方法全局设置双色图标的主色：

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

setTwoToneColor('#eb2f96'); // 设置全局双色图标主色

也可以在使用时单独设置：

<StarTwoTone twoToneColor="#eb2f96" />

图标旋转与动画

使用rotate属性可以旋转图标，spin属性可以添加旋转动画：

<LoadingOutlined spin />
<SyncOutlined spin rotate={180} />

图标主题变量

Ant Design的图标系统支持通过主题变量（Design Token）进行定制，相关定义可以参考：components/icon/index.zh-CN.md

实际应用示例

以下是一个综合使用内置图标、自定义SVG图标和IconFont图标的示例：

import { Space } from 'antd';
import { HomeOutlined, SettingOutlined } from '@ant-design/icons';
import HeartIcon from './HeartIcon';
import MyIcon from './MyIcon';

const IconDemo = () => (
  <Space size="large">
    <HomeOutlined style={{ fontSize: '24px' }} />
    <SettingOutlined style={{ fontSize: '24px', color: '#1890ff' }} />
    <HeartIcon style={{ fontSize: '24px', color: 'hotpink' }} />
    <MyIcon type="icon-example" style={{ fontSize: '24px' }} />
  </Space>
);

总结

Ant Design图标系统提供了灵活多样的使用方式，从内置图标到完全自定义的SVG图标，再到与IconFont的无缝集成，满足了不同场景下的图标需求。通过本文介绍的方法，开发者可以轻松实现图标定制，为应用增添个性化视觉效果。

要获取更多信息，请参考官方文档：

• 图标组件文档：components/icon/index.zh-CN.md
• 自定义图标示例：components/icon/demo/custom.tsx
• IconFont集成示例：components/icon/demo/iconfont.tsx