前端网站图标之引用技术的演变

一、背景

前几年刚入前端的时候，还在使用 CSS 精灵图，还要适配恶心的老版本 IE，而现在，svg 都开始普及了，可喜可贺，遂记录为 blog 一篇。

二、演变过程

1、直接 `<img/>`

简单粗暴

2、CSS Sprites - 雪碧图/精灵图

原理：

<img/> + CSS

把一个个图标合并在一张图片上，再通过 background-position 定位。

优点：

减少请求数

减少总图片体积

缺点：

不易维护

3、Icon Font

原理：

@font-face

优点：

通过 CSS 即可换颜色

缺点：

仅支持单色

（1）unicode

使用：

@font-face {font-family: 'iconfont';
    src: url('iconfont.eot');
    src: url('iconfont.eot?#iefix') format('embedded-opentype'),
    url('iconfont.woff') format('woff'),
    url('iconfont.ttf') format('truetype'),
    url('iconfont.svg#iconfont') format('svg');
}

.iconfont{
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke- 0.2px;
    -moz-osx-font-smoothing: grayscale;}

<i class="iconfont">3</i>

（2）font-class 引用

font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。

使用：

先引入 CSS 文件：//at.alicdn.com/t/font_8d5l8fzk5b87iudi.css

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

4、SVG

优点：

支持多色

渲染无抖动 (会占位)

缺点 :

兼容性问题 (可能会导致性能渲染略差)

体积略大

（1）img/object 标签

缺点：跟 <img> 一样的问题，多个图片会导致多个请求。

（2）Inline SVG

直接把 SVG 写入 HTML 中。

缺点：不适合非服务器渲染的页面。

（3）Data URIs

background: url()不光可以放路径，还能放 SVG。

缺点：不能使用 CSS 修改 Icon 的颜色和边线属性。

（4）SVG Sprite

利用 Data URIs ，实现 SVG 版本的雪碧图。

缺点：跟Data URIs一样，不能使用 CSS 修改 Icon 的颜色和边线属性。

（5）SVG Defs/Symbols [推荐]

是 SVG Sprite 的升级版，SVG Sprite 靠 background-position 定位，而 Symbols 靠 <svg> 里的 <symbol id="x"> 的 id 来查找。

使用：

引入//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js

<style type="text/css">
    .icon {
        1em; height: 1em;
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
    }
</style>

<svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-xxx"></use>
</svg>

二、推荐平台

阿里妈妈旗下：

https://www.iconfont.cn

上面 第一章 所用的代码 demo 都是以这个平台为例。

优点：

为了防止使用 Icon Font 和 SVG （这两者 iconfont.cn 都支持）的过程中，仅仅为了使用几个图标而加载包含数百图标的大文件，推荐用这个网站管理你每个项目所需的图标库。

参考资料

https://io-meter.com/2014/07/20/replace-icon-fonts-with-svg/

前端网站图标 之 引用技术的演变