关于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, 心愿对你有所帮忙, 让咱们一起致力走向巅峰!