在项目中引入第三方矢量图标库已经成为了非常常见的需求。这是因为矢量图不仅体积小，而且在放大时不会失真，颜色也可以轻松修改。相比于传统的方式去加载大量的图片（假设你没有用“雪碧图”组合图片），它还可以节省很多次http请求，给网页性能带来巨大的提升。
下面我们以非常流行的阿里巴巴库为例
1. 登录阿里巴巴矢量图标库官网
进入阿里巴巴矢量图标库官网 登录用户名
选择我的项目
在我的项目页面点击右侧“新建项目”图标新建一个项目：
这里最重要的是FontClass和Font Family这两个值，FontClass的值是该图标库中图标的前缀，比如这里的前缀写成了icon-，那么你在项目中就可以使用icon-xxx来引用图标库中的图标。Font Family是图表库的名字，默认情况下，一个i标签的class中必须要带这个类名，才能引用到该图标库中的图标，不过你可以通过修改生成的iconfont.css文件来以前缀作为图标库标识，这个我们后面会讲到。
项目创建完成后，你就可以去图标库中搜索你需要的图标，或者有条件的话可以自己做。鼠标放到图标上时会有三个选项，选择第一个购物车即可添加入库：
你可以将任意多的图标添加到购物车，然后回到“我的项目”，向下滑动，可以看到下图：
点击这个购物车，选择添加至项目：
好的，现在你已经构建了自己的第三方图标库。接下来就是需要把它引入到项目中。
首先选择Font class，然后点击下载至本地，就可以得到一个download.zip压缩包，然后把压缩包解压，打开至最内层，就可以看到所有相关的图标库文件。
一般来说我们只需要这几个文件即可。在项目的 assets 下新建一个文件夹 icon（如果没有使用webpack进行项目管理，可以将其放在任意位置，只要在需要引入图标库的HTML中可以用link标签引用到iconfont.css样式文件即可），如icon，然后把这几个文件全部粘贴进去。
// main.js 引入字体图标
import './assets/icon/iconfont.css'
// 或者在html引入
<link rel="stylesheet" type="text/css" href="./assets/icon/iconfont.css">
假如你需要在项目中引入多个图标库，那么你需要保证这些图标库的Font Family不能重复。如果这些图标库使用相同的前缀，那么你就不可以像上面一样通过前缀来标识图标库，而需要按默认的格式，在class中加上图标库名，防止图标库冲突。如果它们的前缀各不相同，那么你仍然可以配置class，用前缀作为图标库标识。
