vue中写svg组件svg图片加载不出来

首先要安装3个插件：svg-sprite-loader，svgo，svgo-loader

"devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0",
    "postcss-px2rem": "^0.3.0",
    "sass": "^1.32.8",
    "style-resources-loader": "^1.4.1",
    "svg-sprite-loader": "^6.0.5",
    "svgo": "^2.3.0",
    "svgo-loader": "^3.0.0",
    "vue-cli-plugin-style-resources-loader": "~0.1.5"
  },

src/assets/img/svg/index.js

const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('../svg', false, /\.svg$/)
requireAll(req)

src/components/Svg/index.js

import XfsMSvg from './src/Svg'
XfsMSvg.install = function(Vue) {
  Vue.component(XfsMSvg.name, XfsMSvg)
}
export default XfsMSvg

src/components/Svg/src/Svg.vue

<template>
  <svg :class="svgClass">
    <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 lang="scss" scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

main.js

import '@/assets/img/svg'

vue.config.js

const path = require('path')
module.exports = {
  chainWebpack: config => {
    // 给svg规则增加⼀个排除选项
    config.module
      .rule('svg')
      .exclude.add(path.resolve(__dirname, './src/assets/img/svg'))

    // 新增icons规则，设置svg-sprite-loader处理icons⽬录中的svg
    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(path.resolve(__dirname, './src/assets/img/svg'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({ symbolId: 'icon-[name]' })
      .end()
      .use('svgo-loader')
      .loader('svgo-loader')

    // config.resolve.alias.set('@img', path.resolve(__dirname, 'src/assets/img/'))
  },
}