在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>
到此，我们就能在组件中用矢量图标了，我们可以像设置字体一样给图标设置样式。
网友评论