如果你没有在 antd Icon 中找到需要的图标，可以到 iconfont.cn 上采集并生成自己的业务图标库，再进行使用。

一、生成图标库代码

首先，搜索并找到你需要的图标，将它采集到你的购物车里，在购物车里，你可以将选中的图标添加到项目中（没有的话，新建一个），后续生成的资源/代码都是以项目为维度的。

如果你已经有了设计稿，只是需要生成相关代码，可以上传你的图标后，再进行上面的操作。

账户相关布局


来到刚才选中的项目页，点击『生成代码』的链接，会在下方生成不同引入方式的代码，下面会分别介绍。

账户相关布局

二、引入

现在推荐两种引入方式供你选择：Unicode 及 Font class。

Unicode

这是最原始的方式，需要三步来完成引入：

  1. 拷贝项目生成的字体库代码，你可以新建一个样式文件来放置图标相关的样式。

    1.  @font-face {
    2.    font-family: 'iconfont';
    3.    src: url('//at.alicdn.com/t/font_405362_lyhvoky9rc7ynwmi.eot');
    4.    src: url('//at.alicdn.com/t/font_405362_lyhvoky9rc7ynwmi.eot?#iefix') format('embedded-opentype'),
    5.    url('//at.alicdn.com/t/font_405362_lyhvoky9rc7ynwmi.woff') format('woff'),
    6.    url('//at.alicdn.com/t/font_405362_lyhvoky9rc7ynwmi.ttf') format('truetype'),
    7.    url('//at.alicdn.com/t/font_405362_lyhvoky9rc7ynwmi.svg#iconfont') format('svg');
    8.  }

  2. 加入图标样式代码，如果没有特殊的要求，你可以直接复用 Ant Design 图标的样式。

    1.  .iconfont {
    2.    display: inline-block;
    3.    font-style: normal;
    4.    vertical-align: baseline;
    5.    text-align: center;
    6.    text-transform: none;
    7.    line-height: 1;
    8.    text-rendering: optimizeLegibility;
    9.    -webkit-font-smoothing: antialiased;
    10.    -moz-osx-font-smoothing: grayscale;
    11.    &:before {
    12.      display: block;
    13.      font-family: "iconfont" !important;  /* 注意与 font-face 中的匹配 */
    14.    }
    15.  }

  3. 在项目中鼠标移动到要用的图标上，点击『复制代码』，就得到了图标对应的字体编码，现在可以直接引入了：

    1.  <i class="iconfont">&#xe66b;</i>

Font Class

这种方式只是在上一种方式的基础上，给每个图标对应设置了一个语义化的类名，方便使用及后期维护。

  1. 切换到 Font class 页签，在页面头部引入下面生成的 css 代码：

    1. //at.alicdn.com/t/font_405362_lyhvoky9rc7ynwmi.css

    如果不喜欢标签引入的方式，也可以直接拷贝上面链接中的代码到你的样式文件中。如果不喜欢网站默认生成的类名，自己重写这部分代码即可，比如：

    1.  - .icon-ali-pay:before { content: "\e66b"; }              // 修改前
    2.  + .monitor-icon-alipay:before { content: "\e66b"; }       // 修改后

  2. 这时你可以选择拷贝图标对应代码（就是类名，如果类名被重写过，这里记得用修改后的），直接使用：

    1. <i class="iconfont icon-ali-pay"></i>

    不过我们更推荐你参照 antd Icon，将它封装一下：

    2. import React from 'react';
    4. const BizIcon = (props) => {
    5.  const { type } = props;
    6.  return <i className={`iconfont icon-${type}`} />;
    7. };
    8. export default BizIcon;

    现在可以更加方便地使用：

    1. <BizIcon type="ali-pay" />

Unicode 和 Font Class 本质上就是字体，你可以通过一些字体的样式属性去控制这种图标的展现，同时浏览器兼容性很好，但不支持多色图标。

除了上面两种方式，你还可以通过 Symbol 方式引入，相关内容可以参考：