Vue Cli3 使用svg-sprite-loader遇到的问题

[webplus]

项目中使用SVG有两个场景

• 1、Iconfont字体图标
• 2、SVG图标svg-sprite

问题背景：
由于vue cli默认已经对svg做了处理，所以在使用svg-sprite-loader时有冲突导致图标不能正常显示。

//默认`vue-cli` 对svg做的处理，正则匹配后缀名为.svg的文件，匹配成功之后使用 url-loader 进行处理。
 {
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    loader: 'url-loader',
    options: {
      limit: 10000,
      name: utils.assetsPath('img/[name].[hash:7].[ext]')
    }
}

解决方法：
针对不同用途的SVG文件放到不同的目录中，配置不同的loader
src/assets/images/svg (作为图片使用)
src/assets/fonts(字体图标)
src/assets/icons(作为icon的svg)

webpack

// 对于想要用作图片处理（排除掉用svg-sprite-loader的图标目录）
{
  test: /\.svg$/,
  loader: 'url-loader',
  exclude: path.resolve(__dirname, './src/assets/icons') // 不带icon 玩
}
// 对需要svg-sprite的图标目录处理
{
  test: /\.svg$/,
  loader: 'svg-sprite-loader',
  include: path.resolve(__dirname, './src/assets/icons') // 只带自己人玩
}
通过上面的配置不同的SVG文件就各自用不同的loader处理了

Vue Cli3

config.module
        .rule('images')
        .use('url-loader')
        .loader('url-loader')
        .tap(options => {
          options.limit = 100
          options.fallback = {
            loader: 'file-loader',
            options: {
              name: 'assets/images/[name].[ext]?v=[hash:8]',
              publicPath: utils.env.PUBLIC_PATH
            }
          }
          return options
        }).end()

     // set svg-sprite-loader
      // config.module.rule('svg').uses.clear()
      config.module
        .rule('svg')
        .exclude.add(resolve('src/assets/icons'))
        .end()
      config.module
        .rule('icons')
        .test(/\.svg$/)
        .include.add(resolve('src/assets/icons'))
        .end()
        .use('svg-sprite-loader')
        .loader('svg-sprite-loader')
        .options({
          symbolId: '[name]' //可以不用或者根据图标文件名称与symbol元素ID调整
        })
        .end()

SVG Sprites技术推荐几个学习链接
张鑫旭的SVG文章
使用SVG symbols建立图标系统完整指南
使用SVG symbols建立图标系统