关于vue-cli3:vuecli3使用本地彩色icon

vuecli3应用本地黑白icon

1.开发环境 vuecli3
2.电脑系统 windows10专业版
3.在应用vuecli3开发的过程中,咱们常常会应用到 icon,然而应用失常的办法,你会发现引入的图标是没有色彩的,上面我来分享一下应用办法,心愿对你有所帮忙!
4.将图标下载到本地

5.删除红框局部

5-1:除了以下这些文件,其余的文件都能够删除

6.把其余文件,复制到本人的我的项目中,在assets中新建文件并且把方才拷贝的文件放到新建目录下,构造如下:

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

import './assets/chenicon/iconfont.css';
import './assets/chenicon/iconfont.js';
//进行全局导入,这样我的所以组件中都能够应用;如果整个我的项目只有一个页面应用了,能够单个页面进行导入
//留神:如果应用黑白图标,须要引入 iconfont.js文件

8.在vue组件中应用办法,增加如下代码:

<svg class="icon" aria-hidden="true">
  <use xlink:href="#icongouwuche"></use>
</svg>
<svg class="icon" aria-hidden="true">
  <use xlink:href="#iconyemian-copy"></use>
</svg>
//留神: href 中 # 前面就是 icon 类名

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

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

9.成果如下:

//比照,咱们 阿里巴巴矢量图我的项目中的图标/色彩 截然不同。

10.本期的教程到了这里就完结啦,是不是很nice,心愿对你有所帮忙,让咱们一起致力走向巅峰!