阿里矢量字体图标库是国内功能强大且图标内容丰富的矢量图标库,可以下载SVG,PNG,AI等格式的图标,还可以生成自定义的字体图标,极大的方便了UI设计人员及前端开发人员对图标素材的使用。接下来为大家分享如何在VUE项目中使用阿里图标库:
1)使用
阿里图标库要有项目的概念.不要用一个下载一个,要将一个项目中使用到的图标放在一个项目中集中管理:
在前端开发的过程中,使用字体图标比使用图片图标更灵活,可以更随意的修改颜色,修改大小,而且不失真.
2)下载图标
这里的下载图标不是下载图片,而是下载图标代码
然后会得到一个压缩包里面包括如下文件:
在VUE项目中src->>assets下新建一个font文件夹,将压缩包的文件解压到font文件夹内
3)引入图标
在min.js中引入
import ‘./assets/font/iconfont.css’
4)使用
在项目中.以class的方式使用图标
效果:
这里的图标就不再是图片的形式,而是字体的形式,可以用css的color方法修改图标颜色,font-size方法修改图标大小
那么对应的class名称在压缩包中的demo_index.html里查看
第一个class名称:iconfont是固定的 第二个是对应字体的名称
5)更新
以后有新的图标后,直接下载压缩包解压覆盖之前的文件就可以直接使用