vue-cli3中使用阿里巴巴矢量图

介绍在vuecli中怎么使用阿里巴巴矢量图

1.登陆阿里巴巴矢量图库[https://www.iconfont.cn/]，如图

2.选择图标—>添加到购物车

3.添加至项目

4.将图标下载至本地

5.解压

6.打开文件 ，删除红框中的两个文件

7.引入

打开vue项目所在目录 此处是D:vuetest/src/assets (根据本身项目的实际状况写路径)

• 在 assets文件夹中新建icon文件夹

8.打开文件夹，将上图的文件所有拉进去（选中直接拖进icon文件夹中）

9.使用

• 进入vscode打开项目
• 进入src—>assets–>icon中能够看到以下

10.点击进入（随便挑一个展现）如图 （红框部分为图标名字）

11.在html中使用

• 先上效果图

代码

<p>微信</p>

解析:矢量图用起来没有颜色，我在这里本身给他加上了绿色，还有class记得要用 icon iconfont

//本期的教程到这里就结束啦,是否是很简单!让咱们一块儿努力走向巅峰!