干货分享---Ant-Icon 集成 iconfont 项目图标库的最佳实践，以React项目为例（仅兼容现代浏览器，未做充分测试）

一、想解决的问题：

 

1. 随着 iconfont 图标库的增大，项目的体积多多少少会受到影响。我们怎么以最小的代价引用icon？

2. 怎么让主流icon组件，像<svg/>一样可以设置填充色？

3. 怎么兼顾icon组件的控制细粒度？

二、介绍iconfont的的三种引用方式：

 

翻阅 iconfont帮助文档 后

我们可以知道有三种方式

前两种不加赘述，优点及缺点也显而易见

1、unicode引用

兼容性好是肯定的，可惜空间浪费严重(需要打包字体文件)

用起来是这样的体验

<i class="iconfont">&#x33;</i>

emmm，总觉得代码不好看。语义十分不友好，多色图标支持并不友好

2、font-class引用

体积并没有变化，理解成是unicode方式的css引用也没什么毛病

代码是这样的

<i class="iconfont icon-xxx"></i>

语义好理解了很多。多色图标支持还是不友好