icon 的前生今世 & iconfont 的晋级之路

Posted 2021-01-24 catherlee

　  布吉岛为啥起了个这么文(dou)艺(bi)的名字，话不多说，开始总结??。

 

1??发展过程

1. 雪碧图：

        起初，大部分图标都是用 img 来实现的。渐渐发现一个页面的请求资源中图片 img 占了大部分，所以为了优化有了image sprite 就是所谓的雪碧图，就是将多个图片合成一个图片，然后利用 css 的 background-position 定位显示不同的 icon 图标。 

      但这个合成小图片为雪碧图的方式也有一个很大的痛点，维护困难。每新增一个图标，都需要改动原始图片，还可能不小心出错影响到前面定位好的图片，而且一修改雪碧图，图片缓存就失效了，久而久之就不知道该怎么维护了。

2. Font Awesome：

       后来渐渐地一个项目里几乎不会使用任何本地的图片了，而使用一些 font 库来实现页面图标。常见的如 Font Awesome ，使用起来也非常的方便，但它有一个致命的缺点就是找起来真的很不方便，图标少，定制性不友善。

3. iconfont：

      iconfont 更加强大，它阿里做的开源图库，还有专门的 github issue，图标数量很多，不仅有几百个公司的开源图标库，还有各式各样的小图标，还支持自定义创建图标库 ，给前端开发带来了很大便利。

 

2??iconfont的3种使用方式

1. unicode:

   优势： 兼容性最好，支持ie6以上。并且能按照字体的方式调整图标大小，颜色。 

   劣势： 不支持多色图标。在不同设备的浏览器渲染会有差别，图标显示的位置，大小可能受css影响，不好调整。书写不直观，语意不明确。

     使用方法：引入自定义字体 `font-face；定义使用iconfont的样式；挑选相应图标并获取字体编码，应用于页面

 

 

2. font-class:

     特点： 兼容性良好，支持ie8+，相比于unicode语意明确，书写更直观

     使用方法：拷贝项目下面生成的fontclass代码; 挑选相应图标并获取类名，应用于页面

     主要原理：其实是和 unicode 一样的，它只是多做了一步，将原先&#xe604这种写法换成了.icon-QQ，它在每个 class 的 before 属性中写了unicode,省去了人为写的麻烦。如 .icon-QQ:before { content: "e604"; }

     坑： 一个项目中用到了两组font-class，一定要注意命名空间的问题。

 

 

3. symbol:

    支持多色图标；支持font-size调整样式；支持ie9+；可用css实现动画；减少http请求；矢量，缩放不失真 ；可以精细控制SVG图标部分细节

       使用svg-icon的好处：再也不用发送woff|eot|ttf| 这些很多个字体库请求了，svg都可以内联在html内。

 

       使用方法： 第一步：拷贝项目下面生成的symbol代码，引入 ./iconfont.js；加入通用css代码（引入一次就行）；挑选相应图标并获取类名，应用于页面

 

       扩展：svg 是一个真正的矢量，不管你再怎么的放缩它都不会失真模糊，现在ui设计师平时都喜欢使用 sketch 来工作，只要轻松一键就能导出 svg 了，所以 svg 也更受设计师的青睐。

 

  

参考文档：  iconfont    Font Awesome  未来必热：SVG Sprite技术介绍