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";}   

调用方式

<i class="icon-font i-calendar"></i>

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

缺点：

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

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

今天的icon

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

不优雅的引入方式

一坨svg标签

<svg height="150" width="500">
   <defs>
    <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">  
        <stop offset="0%" style="stop-color:rgb(255,255,255);      stop-opacity:0" />  
        <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
    </radialGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>

svg sprite

<svg style="height:0;width:0;display:none;" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <symbol id="icon-italy" width="150" height="100" viewBox="0 0 3 2">
        <rect width="1" height="2" x="0" fill="#008d46" />
        <rect width="1" height="2" x="1" fill="#ffffff" />
        <rect width="1" height="2" x="2" fill="#d2232c" />
    </symbol>

    <symbol id="icon-france" width="150" height="100" viewBox="0 0 3 2">
        <rect width="1" height="2" x="0" fill="#002496" />
        <rect width="1" height="2" x="1" fill="#ffffff" />
        <rect width="1" height="2" x="2" fill="#ee2839" />
    </symbol>
</svg>

<svg><use xlink:href="#icon-italy"/></svg>
<svg><use xlink:href="#icon-france"/></svg>

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

目前在webpack中的处理

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

使用svg手写图标的demo