vue配置svg 图标显示不出来

组件：
  <svg :class="svgClass" aria-hidden="true">
    <use :xlink:href="iconName"></use>
  </svg>

  props: {
    iconClass: {
      type: String,
      required: true
    },
    className: {
      type: String
    }
  },
  computed: {
    iconName() {
      return `#icon-${this.iconClass}`
    },
    svgClass() {
      if (this.className) {
        return 'svg-icon ' + this.className
      } else {
        return 'svg-icon'
      }
    }
  }

创建 icons 目录 svg目录下放 图片   index.js里面 加入

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

svg图片 没显示出来 也没报错 ？？？

解决办法：

npm install svg-sprite-loader -D 或 yarn add svg-sprite-loader -D

在vue.config.js   中加入 
    chainWebpack: (config) => {
        // config.resolve.alias
        //     .set('@', resolve('src')) //3.0的写法 映射路径 @代表src 比如要写一个图片 <img src='@/assets/img/1.jpg'/>就会读取src下assets下img下的图片
        const svgRule = config.module.rule('svg');
        svgRule.uses.clear();
        svgRule
            .test(/.svg$/)
            .use('svg-sprite-loader')
            .loader('svg-sprite-loader')
            .options({
                symbolId: 'icon-[name]'
            });
    },