---
order: 12
title: 業務圖標
type: 進階
---
通常情況下，你可以通過 Ant Design 提供的 `<Icon />` 圖標組件來使用 [Ant Design 官方圖標](http://ant.design/components/icon-cn/)。基本使用方式如下：
```jsx
<Icon type="heart" style={{ fontSize: '16px', color: 'hotpink' }} />
```
如果你沒有在 Ant Design 官方圖標中找到需要的圖標，可以到 [iconfont.cn](http://iconfont.cn/) 上采集并生成自己的業務圖標庫，再進行使用。
## 一、生成圖標庫代碼
首先，搜索并找到你需要的圖標，將它采集到你的購物車里，在購物車里，你可以將選中的圖標添加到項目中（沒有的話，新建一個），后續生成的資源/代碼都是以項目為維度的。
> 如果你已經有了設計稿，只是需要生成相關代碼，可以上傳你的圖標后，再進行上面的操作。
<img width="600" alt="賬戶相關布局" src="https://gw.alipayobjects.com/zos/rmsportal/jJQYzRyqVFBBamUOppXH.png" />
<br />
來到剛才選中的項目頁，點擊『生成代碼』的鏈接，會在下方生成不同引入方式的代碼，下面會分別介紹。
<img width="600" alt="賬戶相關布局" src="https://gw.alipayobjects.com/zos/rmsportal/DbDSgiRukSANKWyhULir.png" />
## 二、引入
有三種引入方式供你選擇：SVG Symbol、Unicode 及 Font class。我們推薦在現代瀏覽器下使用 SVG Symbol 方式引入。
### SVG Symbol
SVG 符號引入是現代瀏覽器未來主流的圖標引入方式。其方法是預先加載符號，在合適的地方引入并渲染為矢量圖形。有如下特點：
- 支持多色圖標，不再受到單色圖標的限制
- 通過一些技巧，支持像字體那樣，通過 `font-size`、`color` 來調整樣式
- 支持 IE 9+ 及現代瀏覽器
一般使用步驟如下：
1. 切換到 Symbol 頁簽，復制項目生成的地址代碼：
```
//at.alicdn.com/t/font_405362_lyhvoky9rc7ynwmi.js
```
2. 加入圖標樣式代碼，如果沒有特殊的要求，你可以直接復用 Ant Design 圖標的樣式
```css
.icon {
width: 1em;
height: 1em;
fill: currentColor;
vertical-align: -0.125em;
}
```
3. 挑選相應圖標并獲取類名，應用于頁面
```html
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-ali-pay"></use>
</svg>
```
你也可以通過使用 Ant Design 圖標組件提供的 `Icon.createFromIconfontCN({...})` 方法來更加方便地使用圖標，使用方式如下：
1. 配置項目地址，創建圖標組件。[詳細用法](https://ant.design/components/icon/#API)
```jsx
import { Icon } from 'antd';
const IconFont = Icon.createFromIconfontCN({
scriptUrl: '//at.alicdn.com/t/font_405362_lyhvoky9rc7ynwmi.js',
});
export default IconFont;
```
2. 之后可以像使用 `<Icon />` 組件一樣方便地使用，支持配置樣式
```jsx
<IconFont type="icon-ali-pay" style={{ fontSize: '16px', color: 'lightblue' }} />
```
### Unicode
這是最原始的方式，需要三步來完成引入：
1. 拷貝項目生成的字體庫代碼，你可以新建一個樣式文件來放置圖標相關的樣式。
```css
@font-face {
font-family: 'iconfont';
src: url('//at.alicdn.com/t/font_405362_lyhvoky9rc7ynwmi.eot');
src: url('//at.alicdn.com/t/font_405362_lyhvoky9rc7ynwmi.eot?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_405362_lyhvoky9rc7ynwmi.woff') format('woff'),
url('//at.alicdn.com/t/font_405362_lyhvoky9rc7ynwmi.ttf') format('truetype'), url('//at.alicdn.com/t/font_405362_lyhvoky9rc7ynwmi.svg#iconfont')
format('svg');
}
```
2. 加入圖標樣式代碼，如果沒有特殊的要求，你可以直接復用 Ant Design 圖標的樣式。
```css
.iconfont {
display: inline-block;
font-style: normal;
vertical-align: baseline;
text-align: center;
text-transform: none;
line-height: 1;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
&:before {
display: block;
font-family: 'iconfont' !important; /* 注意與 font-face 中的匹配 */
}
}
```
3. 在項目中鼠標移動到要用的圖標上，點擊『復制代碼』，就得到了圖標對應的字體編碼，現在可以直接引入了：
```html
<i class="iconfont"></i>
```
### Font Class
這種方式只是在上一種方式的基礎上，給每個圖標對應設置了一個語義化的類名，方便使用及后期維護。
1. 切換到 Font class 頁簽，在頁面頭部引入下面生成的 css 代碼：
```html
//at.alicdn.com/t/font_405362_lyhvoky9rc7ynwmi.css
```
> 如果不喜歡標簽引入的方式，也可以直接拷貝上面鏈接中的代碼到你的樣式文件中。如果不喜歡網站默認生成的類名，自己重寫這部分代碼即可，比如：
```diff
- .icon-ali-pay:before { content: "\e66b"; } // 修改前
+ .monitor-icon-alipay:before { content: "\e66b"; } // 修改后
```
2. 這時你可以選擇拷貝圖標對應代碼（就是類名，如果類名被重寫過，這里記得用修改后的），直接使用：
```html
<i class="iconfont icon-ali-pay"></i>
```
不過我們更推薦將它封裝一下：
```js
import React from 'react';
const BizIcon = props => {
const { type } = props;
return <i className={`iconfont icon-${type}`} />;
};
export default BizIcon;
```
現在可以更加方便地使用：
```jsx
<BizIcon type="ali-pay" />
```
Unicode 和 Font Class 本質上就是字體，你可以通過一些字體的樣式屬性去控制這種圖標的展現，同時瀏覽器兼容性很好，但不支持多色圖標。
> 相關內容可以參考：
>
> - [iconfont.cn 代碼使用幫助](http://iconfont.cn/help/detail?spm=a313x.7781069.1998910419.d8d11a391&helptype=code)
> - [Web 設計新趨勢: 使用 SVG 代替 Web Icon Font](https://io-meter.com/2014/07/20/replace-icon-fonts-with-svg/)
