引用阿里图标库的方式有三种，前两种都只能引入单色的图标，对于强迫症简直了，所以俺参考其他大佬的博客，学习了如何通过symbol引用彩色的图标

第一步：在阿里图标库选择好自己要的图标，加入购物车，添加至项目，下载到本地

这样就把样式文件下载到本地了 

 

 第二步：在vue项目里面创建对应的inconfont文件夹

将这些下载的样式文件放到新建的文件里，方便项目中引用

第三步：在main.js中，引入这几个文件（前两个是阿里图标文件，最后一个可以不要，只是自己设置的基础图标宽高等），目的是为了让全局可以使用引入的阿里图标

// 引入全局可用阿里图标样式文件
import './assets/iconfont/iconfont.css'
// 引入全局可用阿里图标js文件
import './assets/iconfont/iconfont.js'
// 引入自己设置的全局icon基础样式，一般用于规定基础的svg宽高和图标大小
import './assets/css/iconfont.css'

icon图标的基础样式，一般用于限定宽高 ：

 

 第四步：在需要使用图标的界面放上svg代码

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

 

 

 第五步：运行项目