vue 引入第三方icon库

在项目中引入第三方矢量图标库已经成为了非常常见的需求。这是因为矢量图不仅体积小，而且在放大时不会失真，颜色也可以轻松修改。相比于传统的方式去加载大量的图片（假设你没有用“雪碧图”组合图片），它还可以节省很多次http请求，给网页性能带来巨大的提升。

下面我们以非常流行的阿里巴巴库为例

1. 登录阿里巴巴矢量图标库官网

进入阿里巴巴矢量图标库官网 登录用户名

选择我的项目

image

在我的项目页面点击右侧“新建项目”图标新建一个项目：

image

这里最重要的是FontClass和Font Family这两个值，FontClass的值是该图标库中图标的前缀，比如这里的前缀写成了icon-，那么你在项目中就可以使用icon-xxx来引用图标库中的图标。Font Family是图表库的名字，默认情况下，一个i标签的class中必须要带这个类名，才能引用到该图标库中的图标，不过你可以通过修改生成的iconfont.css文件来以前缀作为图标库标识，这个我们后面会讲到。

项目创建完成后，你就可以去图标库中搜索你需要的图标，或者有条件的话可以自己做。鼠标放到图标上时会有三个选项，选择第一个购物车即可添加入库：

image

你可以将任意多的图标添加到购物车，然后回到“我的项目”，向下滑动，可以看到下图：

image

点击这个购物车，选择添加至项目：

image
好的，现在你已经构建了自己的第三方图标库。接下来就是需要把它引入到项目中。
image

首先选择Font class，然后点击下载至本地，就可以得到一个download.zip压缩包，然后把压缩包解压，打开至最内层，就可以看到所有相关的图标库文件。

image
一般来说我们只需要这几个文件即可。在项目的public/assets下新建一个文件夹（如果没有使用webpack进行项目管理，可以将其放在任意位置，只要在需要引入图标库的HTML中可以用link标签引用到iconfont.css样式文件即可），如icon，然后把这几个文件全部粘贴进去。

最后只需要在HTML中这样引入iconfont.css：

<link rel="stylesheet" type="text/css" href="./assets/icon/iconfont.css">

现在你就可以使用<i class=“iconfont icon-xxx”>的形式来引用图标库中的图标了。注意，默认情况下，这里必须要带上iconfont，也就是你的图标库名，它才能找到对应的图标库。不过我们可以通过修改iconfont.css来避免这个“多余”的类名。

打开iconfont.css，可以看到下面的配置：

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

这是在指定具有iconfont类名的图标，全部使用我们的iconfont图标库，我们可以把它替换成下面的代码：

[class^="icon-"], [class*=" icon-"] {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

一定要注意，class*=" icon"这里的icon前面有一个空格。这里的含义是，诸如class="icon-xxx"或者class="xxx icon-xxx"这种格式的类名，都要引用iconfont这个图标库，所以这样修改之后，你就不需要在图标的类名中写iconfont了。也就是可以使用<i class=“icon-xxx”>来引用图标。

假如你需要在项目中引入多个图标库，那么你需要保证这些图标库的Font Family不能重复。如果这些图标库使用相同的前缀，那么你就不可以像上面一样通过前缀来标识图标库，而需要按默认的格式，在class中加上图标库名，防止图标库冲突。如果它们的前缀各不相同，那么你仍然可以配置class，用前缀作为图标库标识。