乐趣区

关于vue.js:vuecli3中使用阿里巴巴矢量图

介绍在 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

// 本期的教程到这里就完结啦, 是不是很简略! 让咱们一起致力走向巅峰!

退出移动版