1.安装依赖

npm i svg-sprite-loader --save

2.创建svg组件

svg组件代码

<template>
  <div>
    <svg
      class="svg-icon"
      :class="svgClass"
      aria-hidden="true"
      :style="{ color: color }"
    >
      <use :xlink:href="iconName"></use>
    </svg>
  </div>
</template>

<script>
export default {
  name: "SvgIcon",

  props: {
    svgName: {
      type: String,

      required: true,
    },
    hoverColor: {
      type: String,
      default: "",
    },
  },
  computed: {
    iconName() {
      return `#icon-${this.svgName}`;
    },

    svgClass() {
      if (this.svgName) {
        return "svg-icon" + this.svgName;
      } else {
        return "svg-icon";
      }
    },
  },
  data() {
    return {
      color: "",
    };
  },
};
</script>

<style lang="less" scoped>
.svg-icon {
  width: 100px;
  height: 100px;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
  transition: all 1s;
  color: red;
}
</style>

3.创建svg文件夹

在svg文件下面创建index.js文件（用于全局注册svg组件）

import SvgIcon from '@/components/SvgIcon'

// 注册到全局

Vue.component('svg-icon', SvgIcon)

const requireAll = requireContext => requireContext.keys().map(requireContext)

const req = require.context('../svg', false, /\.svg$/)  //找到目录下面带有svg后缀的文件
console.log(req.keys());
requireAll(req)

4.在main.js引入

import '@/assets/svg/index'

5.vue.config.js配置

function resolve(dir) {
  return path.join(__dirname, dir);
}
module.exports = {
  chainWebpack(config) {
    // set svg-sprite-loader
    config.module
      .rule('svg')
      .exclude.add(resolve('src/assets/svg')) 
      .end()
    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(resolve('src/assets/svg'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
      .end()
  }
}

6.使用

用于学习交流，如有不妥请多多指教