使用 iconfont 来引用 font class 图标

之前项目中一直使用美工给的 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">
  1. 使用图标
 <i className={classnames('iconfont icontrash', styles.deleteStatusIcon)} />

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

最后

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