SVG的两个坑

• 我一开始发现svg没变色,然后去看了下svg源文件,发现它身上有个fill属性然后就去查了下怎么解决就搜到

可以使用svgo-loader把svg上的fill属性给去除掉

vue.config.js

const path = require('path')
module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
      ? '/morney-website/'
      : '/',
  lintOnSave: false,
  chainWebpack: config => {
    const dir = path.resolve(__dirname,'src/assets/icons')

    config.module
        .rule('svg-sprite')
        .test(/\.svg$/)
        .include.add(dir).end() //包含 icons 目录
        .use('svg-sprite-loader').loader('svg-sprite-loader').options({extract:false}).end()
        .use('svgo-loader').loader('svgo-loader') // 使用svgo-loader
        .tap(options=>({...options,plugins:[{removeAttrs:{attr:'fill'}}]})).end() //去掉fill属性
    config.plugin('svg-sprite').use(require('svg-sprite-loader/plugin'),[{plainSprite:true}])
    config.module.rule('svg').exclude.add(dir) // 其他 svg loader 排除 icons 目录
  }
}

• 该bug官方已经修复

• 首先我使用svg-sprite-loader来引入所有的icon把所有的icon变成svg,所有icon在svg里做一个symbol。 然后发现一个bug就是webstorm永远无法去import一个scss,因为webstorm在遇到这个loader的时候,发现 这个loader实现有问题,没有办法解析loader,那么就整个webpack的配置就解析不了了,我发现他们之间的关联用 了一下午才发现是这个loader导致webstorm的bug,然后我就去看这个svg-sprite-loader github issue列表,发现 issue列表里有人发现了这个问题,然后我就看下有没有人解决,看了下github pull requests,发现也有人在共享代码 虽然有代码但迟迟没有合并到这个loader的源代码里,于是我就自己动手解决这个问题,我就把他源代码fork了一份 ,就把别人提交的pr给merge 到了源代码里,然后就使用npm publish发布到npm上,然后我自己去下载自己发布的版本。