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]'
            });
    },