在vue项目开发过程中我们往往需要使用大量的图标，虽然我们可以用图片来代替，但是使用图片的方式实在是不方便、不灵活，比如做图标颜色动态切换时就需要两张以上的图标进行切换。当图标进行大小缩放时存在一定的失真问题。今天简单介绍如何使用阿里云矢量图标库，使用矢量图标来解决上述问题。

一、登录阿里云矢量图标库

登录阿里云矢量图标库官网，搜索自己想要的图标，点击添加入库

添加入库以后我们在购物车里面将图标添加至项目，加入新项目，项目名称自定义，然后确认。

找到刚才的项目，下载至本地，解压备用

二、在项目中使用

打开vue项目，并在src文件夹下新建iconfont文件夹，把刚才解压以后的iconfont.css、iconfont.ttf、iconfont.woff、iconfont.woff2复制到iconfont文件夹下

在App.vue中全局引入iconfont.css，注意路径一定要写正确

 @import "./iconfont/iconfont.css";

最后在组件中使用，需要添加类样式iconfont和矢量图标类样式

<span class="icon-shouji iconfont"></span>

到此，我们就能在组件中用矢量图标了，我们可以像设置字体一样给图标设置样式。