介绍在 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
// 本期的教程到这里就完结啦, 是不是很简略! 让咱们一起致力走向巅峰!