之前项目中一直使用美工给的 svg 图标,但是有几个缺点:
- svg 图标无法很方便的定义颜色,大小。
- svg 图标从设计那边拿到之后需要使用 svgo 进行处理。
后来有小伙伴提出使用 iconfont 来保存图标,再使用 font class 来使用图标。结果……真香。
什么是 font class 呢?其实用过 ant design 的 Icon 组件差不多就了解了。就是一个 <i> 标签,写上 className,这个 <i> 标签会渲染出图标。并且图标的大小与容器的字体大小相关联,而且可以为图标添加样式 className。
其实,在 ant design 中也有提到如何使用 iconfont 的图标。
步骤
简单说下使用 iconfont 的步骤:
- 在 iconfont 创建项目。
- 在 iconfont 中去找一些图标加入到项目中。
- 进入我的项目,点击查看在线链接。就可以看到当前项目的链接了。
- 在项目中引入链接:
<link rel="stylesheet" href="//at.alicdn.com/t/font_666666229_gvtaaa7ta2w.css">
- 使用图标
<i className={classnames('iconfont icontrash', styles.deleteStatusIcon)} />
使用的效果和 ant design 的 Icon 组件很差不多。
最后
iconfont 的图表库可以线上获取,也可以下载到本地。外加上 iconfont 里面丰富的图标资源,很容易就能生成一堆图标用于项目中。还是很方便实用的。