引入第三方图标库，并在前台罗列图标

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

下面我们就一起来看如何往项目中引入一个第三方图标库，以及如何把图标罗列到前端页面中。

引入第三方图标库

我们以最流行的阿里巴巴矢量图标库为例来介绍。首先你需要登录阿里巴巴矢量图标库官网：阿里巴巴矢量图标库，可以使用你的github账号或者微博账号登录。登录之后选择图标管理下的“我的项目”：

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

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

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

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

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

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

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

一般来说我们只需要这几个文件即可。在项目的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，用前缀作为图标库标识。

在页面中罗列图标

假如你想让用户看到当前图标库支持哪些图标，或者想让用户选择图标库里的图标，那么你就需要能够把图标全部罗列到页面上。你可以通过解析压缩包中附带的iconfont.json来读取所有图标的类名：

这里的font_class就是我们的图标名，不过你需要在前面拼接前缀，并且加上iconfont这个图标库名才可以显示图标，即：

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

现在如果图标库有更新，只需要重新替换上述几个文件，页面中所罗列的图标立即就会变化。

除了这种方式，我们还可以从附带的介绍文件demo_index.html中解析出图标名和类名，代码如下：

this.$axios.get("./assets/linkIcon/demo_index.html").then(res => {try{let parser = new DOMParser();   //使用原生的DOMParser解析HTML文档let innerDocument = parser.parseFromString(res.data, "text/html");//查询该HTML中罗列的图标let target = innerDocument.querySelectorAll(".content.font-class li.dib");   //遍历查询结果，把每个图标数据保存在变量中target.forEach((item, index) => {let className = item.querySelector("span").className;let iconName = item.querySelector(".name").textContent;let iconCode = item.querySelector(".code-name").textContent;this.$set(this.iconGroup, index,{className: className,iconName: iconName,iconCode: iconCode})})} catch(e){console.log(e);}
})

现在我们本地的iconGroup变量就拿到了图标库中每一个图标对象，你可以以任意的形式罗列它们，并且只需要把i标签的class设置为这里的className，立即就可以显示该图片，不需要进行额外的拼接操作。

实际上这里所写的就是一个极其简单的前端爬虫，它抓取一个HTML页面，解析其中的结构和数据。由于这是在前端环境下，因此解析HTML文件非常简单。如果使用的是node或者python，那么就需要使用相关的工具库来解析HTML文件。