vue引入阿里巴巴矢量图标

阿里巴巴矢量图标库相较于其他库的icon图标要丰富不少，目前有418w+ icon，可以说是前端工作人员的首选，博主也在这里安利一下。

网址：点击直达

有时候我们写vue的时候经常要引入icon图标，下面我就简单介绍一下vue 如何引入阿里图标。

1. 注册一个账号是必不可少的O(∩_∩)O哈哈~，这里就不介绍了。
2. 去阿里图标矢量图标库将想要的图标添加入库。

   

3. 再去库中将图标添加到项目。
4. 再到我的项目中，选择

   

   ，我这里采用的是将图标代码包下载到本地再引入到vue项目中。
5. 在vue项目的assets文件夹下新建一个iconfont文件夹（名字随意），将刚刚下载下来的代码包中的iconfont.css、iconfont.eto、iconfont.svg、iconfont.ttf、iconfont.woff复制到iconfont文件夹下。
6. 在main.js中全局引入iconfont.css。

   

7. 之后就可以在项目中正常使用了。