使用 iconfont 中的 svg 图标

最近在使用 Element-UI开发的时候发现其图标并不是够用，于是想着如何将 https://www.iconfont.cn/home/index 上面的图标导入进自己的项目中去。

网上的搜索结果基本都是传统的引入CSS的方法，并没有使用到SVG的特性，这里介绍使用SVG来引入图标，这中方式普适任意的组件库。

首先我们在iconfont上新键好自己的项目并下载至本地，打开之后其文件如下

我们只使用其中的iconfont.js，然后将其引入到我们的项目中去

import 'PATH/iconfont.js';

我们可以看一下iconfont.js源码，其大致是将一个SVG的图标集写到了源码中去，运行后我们可以看到这段SVG集合

每一个图标项的ID是我们原先自己设置好的，接下来我们只要在项目中引用这个ID即可，如下

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