Icon 图标 #

概述 #

Ant Design 提供了丰富的图标库，通过 @ant-design/icons 包提供超过 2000 个高质量图标。图标可以帮助用户快速理解功能含义，提升界面的可读性和美观度。

安装 #

bash

npm install @ant-design/icons

基础用法 #

基本使用 #

tsx

import { HomeOutlined, SettingFilled, SmileOutlined } from '@ant-design/icons';

<HomeOutlined />
<SettingFilled />
<SmileOutlined />

图标尺寸 #

tsx

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

<HomeOutlined style={{ fontSize: '16px' }} />
<HomeOutlined style={{ fontSize: '24px' }} />
<HomeOutlined style={{ fontSize: '32px' }} />
<HomeOutlined style={{ fontSize: '48px' }} />

图标颜色 #

tsx

import { HomeOutlined, HeartFilled, StarFilled } from '@ant-design/icons';

<HomeOutlined style={{ color: '#1677ff' }} />
<HeartFilled style={{ color: '#ff4d4f' }} />
<StarFilled style={{ color: '#faad14' }} />

旋转动画 #

tsx

import { SyncOutlined, LoadingOutlined } from '@ant-design/icons';

<SyncOutlined spin />
<LoadingOutlined spin />

旋转角度 #

tsx

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

<SyncOutlined rotate={90} />
<SyncOutlined rotate={180} />
<SyncOutlined rotate={270} />

图标类型 #

Ant Design 图标分为三种类型：

1. 线框风格 (Outlined) #

tsx

import {
  HomeOutlined,
  SettingOutlined,
  UserOutlined,
  SearchOutlined,
} from '@ant-design/icons';

<HomeOutlined />
<SettingOutlined />
<UserOutlined />
<SearchOutlined />

特点：

线条简洁
适合浅色背景
默认推荐使用

2. 实底风格 (Filled) #

tsx

import {
  HomeFilled,
  SettingFilled,
  UserOutlined,
  StarFilled,
} from '@ant-design/icons';

<HomeFilled />
<SettingFilled />
<UserOutlined />
<StarFilled />

特点：

视觉突出
适合强调状态
如选中、激活状态

3. 双色风格 (TwoTone) #

tsx

import {
  HomeTwoTone,
  SettingTwoTone,
  StarTwoTone,
  HeartTwoTone,
} from '@ant-design/icons';

<HomeTwoTone />
<SettingTwoTone />
<StarTwoTone />
<HeartTwoTone />

特点：

双色设计
视觉层次丰富
可自定义主色

双色图标自定义颜色 #

tsx

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

<HeartTwoTone twoToneColor="#eb2f96" />
<StarTwoTone twoToneColor="#faad14" />

常用图标分类 #

方向性图标 #

tsx

import {
  UpOutlined,
  DownOutlined,
  LeftOutlined,
  RightOutlined,
  ArrowUpOutlined,
  ArrowDownOutlined,
  ArrowLeftOutlined,
  ArrowRightOutlined,
} from '@ant-design/icons';

操作类图标 #

tsx

import {
  PlusOutlined,
  MinusOutlined,
  CloseOutlined,
  CheckOutlined,
  EditOutlined,
  DeleteOutlined,
  SearchOutlined,
  SettingOutlined,
} from '@ant-design/icons';

提示类图标 #

tsx

import {
  InfoCircleOutlined,
  InfoCircleFilled,
  CheckCircleOutlined,
  CheckCircleFilled,
  WarningOutlined,
  WarningFilled,
  CloseCircleOutlined,
  CloseCircleFilled,
} from '@ant-design/icons';

数据类图标 #

tsx

import {
  BarChartOutlined,
  LineChartOutlined,
  PieChartOutlined,
  AreaChartOutlined,
  DotChartOutlined,
} from '@ant-design/icons';

文件类图标 #

tsx

import {
  FileOutlined,
  FileTextOutlined,
  FilePdfOutlined,
  FileExcelOutlined,
  FileWordOutlined,
  FileImageOutlined,
  FolderOutlined,
  FolderOpenOutlined,
} from '@ant-design/icons';

用户类图标 #

tsx

import {
  UserOutlined,
  TeamOutlined,
  UserAddOutlined,
  UserDeleteOutlined,
  UsergroupAddOutlined,
  UsergroupDeleteOutlined,
} from '@ant-design/icons';

与组件配合使用 #

按钮中使用 #

tsx

import { Button, Space } from 'antd';
import { SearchOutlined, DownloadOutlined, PlusOutlined } from '@ant-design/icons';

<Space>
  <Button type="primary" icon={<SearchOutlined />}>搜索</Button>
  <Button icon={<DownloadOutlined />}>下载</Button>
  <Button type="primary" shape="circle" icon={<PlusOutlined />} />
</Space>

输入框中使用 #

tsx

import { Input } from 'antd';
import { UserOutlined, SearchOutlined } from '@ant-design/icons';

<Input placeholder="用户名" prefix={<UserOutlined />} />
<Input placeholder="搜索" suffix={<SearchOutlined />} />

标签中使用 #

tsx

import { Tag } from 'antd';
import { CheckCircleOutlined, SyncOutlined, CloseCircleOutlined } from '@ant-design/icons';

<Tag icon={<CheckCircleOutlined />} color="success">成功</Tag>
<Tag icon={<SyncOutlined spin />} color="processing">处理中</Tag>
<Tag icon={<CloseCircleOutlined />} color="error">错误</Tag>

菜单中使用 #

tsx

import { Menu } from 'antd';
import { HomeOutlined, SettingOutlined, UserOutlined } from '@ant-design/icons';

<Menu
  items={[
    { key: 'home', icon: <HomeOutlined />, label: '首页' },
    { key: 'user', icon: <UserOutlined />, label: '用户' },
    { key: 'setting', icon: <SettingOutlined />, label: '设置' },
  ]}
/>

自定义图标 #

使用 createFromIconfontCN #

从 iconfont.cn 创建图标：

tsx

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

const IconFont = createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js',
});

<IconFont type="icon-tuichu" />
<IconFont type="icon-facebook" />
<IconFont type="icon-twitter" />

使用 SVG 组件 #

tsx

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

const HeartSvg = () => (
  <svg viewBox="0 0 1024 1024" width="1em" height="1em" fill="currentColor">
    <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.1-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.3 137.9 188.4 140.1l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c4.1-2.2 95.5-54.4 188.4-140.1 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: any) => <Icon component={HeartSvg} {...props} />;

<HeartIcon style={{ color: '#ff4d4f', fontSize: '24px' }} />

API #

通用图标属性 #

属性	说明	类型	默认值
className	类名	string	-
rotate	旋转角度	number	-
spin	旋转动画	boolean	false
style	样式	CSSProperties	-
twoToneColor	双色图标主色	string	-

createFromIconfontCN #

属性	说明	类型	默认值
scriptUrl	iconfont.cn 生成的 URL	string	-
extraCommonProps	额外属性	object	{}

最佳实践 #

1. 统一图标风格 #

在一个项目中保持图标风格一致：

tsx

import { HomeOutlined, SettingOutlined } from '@ant-design/icons';

2. 合理使用颜色 #

tsx

import { CheckCircleOutlined, CloseCircleOutlined } from '@ant-design/icons';

<CheckCircleOutlined style={{ color: '#52c41a' }} />
<CloseCircleOutlined style={{ color: '#ff4d4f' }} />

3. 加载状态使用旋转图标 #

tsx

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

<LoadingOutlined spin style={{ fontSize: 24 }} />

4. 可访问性 #

为纯图标按钮添加 aria-label：

tsx

import { Button } from 'antd';
import { SearchOutlined } from '@ant-design/icons';

<Button type="primary" icon={<SearchOutlined />} aria-label="搜索" />

下一步 #

接下来学习 Typography 排版组件！