vue中使用svg注意点

网上介绍在vue中如何使用svg的教程已经很多了，我这不多做赘述。

场景

已经根据网上的教程，将svg组件引入到页面中去了，但是F12发现，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]'
        }
      }