iconfont+svg矢量图使用与介绍

准备工作

1. 首先进入阿里巴巴的iconfont的官网，如果没有账号的话就先注册账号
2. 找到中意的svg图标或者上传自己的svg图标，然后加入购物车
3. 新建一个项目，从购物车里将图标加入到项目中
   
   

4.生成并下载代码，然后解压后放到自己项目的静态文件目录

三种基本的使用方法

Unicode引入

Unicode 是字体在网页端最原始的应用方式，特点是：

支持按字体的方式去动态调整图标大小，颜色等等。
默认情况下不支持多色，直接添加多色图标会自动去色。

下面的编号就是这个svg图标注册的成了个字符编号，相当于调用它的唯一标识（其他方式亦是如此），直接就可以使用

需要在的main.js中全局引入iconfont.css文件，当然也可以局部页面引入，但是为了项目管理方便，不建议这样做

import './assets/iconfont/iconfont.css'

<span class="icon iconfont">&#xe606;</span>

因为现在的图标就相当于一个文字了，支持使用font-size，color改变大小和颜色

<span class="icon iconfont" style="font-size:20px;color:red">&#xe606;</span>

font-class引入

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

与 Unicode 使用方式相比，具有如下特点：
相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。
因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。

font-class模式其实就相当于Unicode多了样式封装，引用起来更加的方便，阅读起来也比字符的编码要简洁。
同样需要引入iconfont.css文件，也支持更改style大小和颜色。

 <span class="iconfont icon-calendar" ></span>

 <span class="iconfont icon-calendar" style="font-size:20px;color:red"></span>

content引入
怀着好奇，打开iconfont.css，发现风格中有一个content，对应一个编码，应该就是这个图标的对应编码。

在常用的组件库中也能找到这个content的存在，比如说我用深度作用选择器修改一个iview组件库中的content。发现，既可以改变content中的编码成自己iconfont注册的字符编码，也可以使用url直接链接到svg的路径打开，这两种打开方式差不多，唯一的区别大概就是使用字符编码会包含有阿里的封装的风格，更加契合iview组件的风格。

效果如下：

Symbol引入

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：

支持多色图标了，不再受单色限制。
通过一些技巧，支持像字体那样，通过 font-size, color 来调整样式。
兼容性较差，支持 IE9+，及现代浏览器。
浏览器渲染 SVG 的性能一般，还不如 png。

svg说到底也就是一串代码，Symboly引入就是将这些svg统一封装到了一个文件里，然后给这些svg加了一个统一的封装，而且有了自己的命名，用的时候直接从集合文件链接里调出来。

使用Symbol引入时需要引入iconfont.js文件

import './assets/iconfont/iconfont.js'

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

可以在当前页面来修改icon的样式属性来控制大小

彩色模式

要进入彩色模式需要修改项目的字体格式，然后将新代码覆盖旧代码上

不过彩色模式适配能不能用需要看是否适配浏览器版本，一般的浏览器应该都没太问题

不过吧，彩色模式相当于支持字体可同时展示多个颜色，在彩色模式下默认展示原本的配色，Unicode和font-class就不支持使用style中的color属性来修改颜色了，但大小什么的可以，如下图所示。

总结

最近在写前端的时候，需要用到自己的svg图时，接触到了iconfont，发现使用起来比较简单快捷，跟别人的轮子适配性也好。
本来是研究一个bug，不指定项目时，两份不同的图标，生成两份iconfont代码的时候，一个全局引用，一个局部引用。字符编码因为都是从e605开始的，可能会导致局部的页面的图标污染全局的图标，所以要对iconfont做项目管理。（阿里巴巴的想法是，建一个项目，可以拉成员，然后每个成员都将自己的svg添加到项目里，生成新代码覆盖旧代码。）怀着想研究一下iconfont以便日后使用的想法，花了一下午捣鼓了捣鼓，也发现了一些别人文章里没提到的东西，就写个博客记录一下。