之前项目中一直使用美工给的 svg 图标，但是有几个缺点：

• svg 图标无法很方便的定义颜色，大小。
• svg 图标从设计那边拿到之后需要使用 svgo 进行处理。

后来有小伙伴提出使用 iconfont 来保存图标，再使用 font class 来使用图标。结果……真香。

什么是 font class 呢？其实用过 ant design 的 Icon 组件差不多就了解了。就是一个 <i> 标签，写上 className，这个 <i> 标签会渲染出图标。并且图标的大小与容器的字体大小相关联，而且可以为图标添加样式 className。

其实，在 ant design 中也有提到如何使用 iconfont 的图标。

步骤

简单说下使用 iconfont 的步骤：

1. 在 iconfont 创建项目。
2. 在 iconfont 中去找一些图标加入到项目中。
3. 进入我的项目，点击查看在线链接。就可以看到当前项目的链接了。
4. 在项目中引入链接：

    <link rel="stylesheet" href="//at.alicdn.com/t/font_666666229_gvtaaa7ta2w.css">

5. 使用图标

 <i className={classnames('iconfont icontrash', styles.deleteStatusIcon)} />

使用的效果和 ant design 的 Icon 组件很差不多。

最后

iconfont 的图表库可以线上获取，也可以下载到本地。外加上 iconfont 里面丰富的图标资源，很容易就能生成一堆图标用于项目中。还是很方便实用的。