1. 需要安装 svg-sprite-loader

npm install -D svg-sprite-loader

2. 添加icon目录，引入svg图标

在src下新建icon文件夹，在src/icon新建svg文件夹，在src/icon/svg文件夹中新建zz.svg文件

3.修改vue.config.js的webpack配置

const resolve = (dir) => path.join(__dirname,dir) // 获取指定路局的绝对地址
chainWebpack(config){ // 额外方法 链式调用

    // 自动化导入样式
    const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
    types.forEach(type =>
    addStyleResource(config.module.rule('scss').oneOf(type)))

    // icon 
    // 1 添加一个loader,负责去icon目录中加载图标，方便直接使用
    config.module.rule('icon')
       .include.add(resolve('src/icon'))
       .end() 
       .test(/\.svg$/) // 以.svg结尾的文件
       .use('svg-sprite-loader') // 添加 svg-sprite-loader 
       .loader('svg-sprite-loader') 
       .options({symbolId:'icon-[name]'}) // 指定 loader选项 (用什么方式给打包的文件命名)

    // 2 当前项目下有一个加载svg的loader,svg规则排除icon目录
    config.module.rule('svg').exclude.add(resolve('src/icon')) 
    },

4. 统一引入svg图片

 //1 在src/icon中新建index.js文件
     // 自动加载svg目录下所有图标
    const req=require.context('./svg',false,/\.svg$/)
    //返回数组的名称就是图标文件的名称
    req.keys().map(req)
// 2 在main.js中引入icon
    import '@/icon';

5. 在组件中使用

 <svg>
    <use xlink:href="#icon-zz"></use>
 </svg>

6.优化 能够像那些ui组件库一样，直接XX-icon标签就能使用

// 1  在components文件夹下自定义一个组件 SvgIcon.vue
<template>
  <svg :class="svgClass" v-on="$listeners"><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>

// 2 修改src/icon中index.js

// ①.注册svg-icon 组件
import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon.vue'
Vue.component('svg-icon',SvgIcon)

// ② 自动加载svg目录下所有图标
const req=require.context('@/icon/svg',false,/\.svg$/) // 指定路径, false不需要递归，校验方式
//返回数组的名称就是图标文件的名称
req.keys().map(req)

// ③ 在界面中调用
<svg-icon icon-class="zz"></svg-icon>