vueでsvgを使用する注意点

ネット上でvueでsvgをどのように使うかを紹介するチュートリアルはもうたくさんありますが、私はこれ以上説明しません.
シーン
すでにネット上のチュートリアルに基づいて、svgコンポーネントをページに導入しましたが、F 12によると、svgファイルは本当に導入されておらず、真ん中が空いています.この問題は私を何日も困らせて、ずっと原因が見つからなかった.
解決する

svgコンポーネント用のiconフォルダではurl-loader設定は変換されません.excludeはこのフォルダを除外することに注意してください.

svg-sprite-loaderを使用してiconsフォルダを処理します.

      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        exclude: [resolve('src/icons')],  //      svg        
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.svg$/,
        loader: 'svg-sprite-loader',
        include: [resolve('src/icons')],  //       
        options: {
          symbolId: 'icon-[name]'
        }
      }