vue使用阿里图标库

阿里矢量字体图标库是国内功能强大且图标内容丰富的矢量图标库，可以下载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)更新

以后有新的图标后,直接下载压缩包解压覆盖之前的文件就可以直接使用