icon解决方案

icon的前世

我们的前辈是这样做的

早期为了减少http的请求，人们想到了将小的 png 图片合并到一张图上，然后根据 background-position 来显示不同的图片。

sprite

好处 ：兼容性好

缺点：

1、改变颜色、大小、透明度不方便，需要使用ps手动替换
2、需要对已有icon放大显示时, 锯齿严重, 需要再保存一份放大版的icon
3、 Sprite文件会随着时间越变越大, 同时内容越来越乱, 逐渐变得难以管理

icon的进化

字体文件取代图片文件：iconfont

css自定义字体网站的出现，使得iconfont变得非常流行
1.下载需要的字体图标文件
通常是这样的

字体图标格式

@font-face { 
font-family: "iconfont";
src: url("./fonts/iconfont.eot");
src: url("./fonts/iconfont.eot?#iefix") format("embedded-opentype"),
url("./fonts/iconfont.woff") format("woff"),
url("./fonts/iconfont.ttf") format("truetype"),
url("./fonts/iconfont.svg#iconfont") format("svg");}
.icon-font{font-family:"iconfont";font-size:16px;font-style:normal;font-weight: normal;font-variant: normal;text-transform: none;line-height: 1;position: relative;vertical-align:-2px;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
.i-calendar:before{content: "\f104";}   

调用方式

优点： 兼容性好，大小，颜色随意改变

缺点：

1.只能为单色图标或者设置为css渐变色

2. 需要加载字体资源
3. 有时会出现锯齿

今天的icon

svg并不比iconfont出现的晚，只是它发挥作用的时机还不够成熟
优点：
1、矢量，可以适应任意分辨率的设备；
2、SVG提供了很多的接口，可定制性强，性能也比较好
3、不用考虑浏览器的兼容性问题
缺点：
渲染性能不及图片和字体高

不优雅的引入方式

一坨svg标签

svg sprite

原理：use标签是利用shadow dom实现的

目前在webpack中的处理

使用svg-inline-loader
小项目地址 https://github.com/littlelady2015/svg-inline-loader.git
svg-inline-loader 会分析 SVG 的内容，去除其中不必要的部分代码，以减少 SVG 的文件大小
后来经过实践发现对于一些自定义的属性 并不能进行处理

使用svg手写图标的demo