vuecli3使用本地彩色icon

vuecli3使用本地彩色icon

1.开发环境 vuecli3
2.电脑系统 windows10专业版
3.在使用vuecli3开发的过程中,我们经常会使用到 icon,但是使用正常的方法,你会发现引入的图标是没有颜色的,下面我来分享一下使用方法,希望对你有所帮助!
4.将图标下载到本地

7.在main.js中添加如下代码:

import './assets/chenicon/iconfont.css';
import './assets/chenicon/iconfont.js';
//进行全局导入,这样我的所以组件中都可以使用;如果整个项目只有一个页面使用了,可以单个页面进行导入
//注意:如果使用彩色图标,需要引入 iconfont.js文件

8.在vue组件中使用方法,添加如下代码:

//注意: href 中 # 后面就是 icon 类名

8-1:在App.vue添加如下代码:

.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

9.效果如下:

//对比,我们 阿里巴巴矢量图项目中的图标/颜色 一模一样。

10.本期的教程到了这里就结束啦,是不是很nice,希望对你有所帮助,让我们一起努力走向巅峰!