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

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

1.登录阿里巴巴矢量图库[https://www.iconfont.cn/],如图
vue-cli3中使用阿里巴巴矢量图_第1张图片
7.引入

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

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

vue-cli3中使用阿里巴巴矢量图_第2张图片
9.使用

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

vue-cli3中使用阿里巴巴矢量图_第3张图片
11.在html中使用

  • 先上效果图

image.png
代码

微信

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

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

你可能感兴趣的:(vue.js,icon)