一、目录结构

二、登陆iconfont，添加图标到购物车，并加入到项目中

1. 设置图标下载格式

2. 项目设置：勾选字体格式SVG

3. 下载到本地，解压

补充

其实在你下载的图标文件里demo有个html文件

在浏览器打开后会看到你所有的图标，并且在页面最底下有使用方法具体内容请自行查看

4. 把demo_index.html、demo.css、inconfont.js添加到 src/assets/icon文件中

5. 在src/components/SvgIcon中添加组件代码

<template>
  <svg :class="svgClass" aria-hidden="true">
    <use :xlink:href="iconName" />
  </svg>
</template>
<script>
export default {
  name: 'SvgIcon',
  props: {
    iconClass: {
      type: String,
      required: true
    },
    className: {
      type: String,
      default: ''
    }
  },
  computed: {
    iconName() {
      return `#icon-${this.iconClass}`;
    },
    svgClass() {
      if (this.className) {
        return 'svg-icon ' + this.className;
      } else {
        return 'svg-icon';
      }
    }
  }
};
</script>
<style scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

 6. 在目录src/icons/index.js中添加下面的代码  全局注册icon组件,并引入非下载的iconfont中的svg图标

这个有个起源是我接手了一个项目，然后用的iconfont图标，因为这个别人下载的iconfont图标，所以我想在往里加图标没办法添加。这时我就单个下载iconfont  svg图标  并加入到src/icons/svg目录下

import Vue from 'vue';
import SvgIcon from '@/components/SvgIcon';
import '@/assets/icon/iconfont';
Vue.component('svg-icon', SvgIcon);
const requireAll = reqireContext => reqireContext.keys().map(reqireContext);
const req = require.context('./svg', false, /\.svg$/);
requireAll(req);

 7. 在main.js中引入 

require('./icons');

 遇到的问题： 当单个下载iconfont图标时，发现选中标签栏时图标没有高亮

1).有问题的效果

 2).应该达到的效果

原因：svg图标 带有 fill 属性，默认是带有颜色的，想要修改先把原fill颜色去掉，如下：

3）去色前后对比

 去色后：

8. 使用

 <svg-icon icon-class="renzhen" />

效果：