I am using webpack to build svg-sprite.
But there is a problem: part of icons have multiple colors, and part — only one. They are used as is.
One color icons should change color according to :hover / :active.
And, according to this I should clean fill attributes for one color icons.
Which I can't do with multicolor ones.
I decide to separate them to different folders and create two webpack rules:
{
test: /icon\/.*\.svg$/,
loaders: [
'svg-sprite-loader',
{
loader: 'svgo-loader',
options: {
plugins: [
// ...
],
},
},
],
},
{
test: /monoicon\/.*\.svg$/,
loaders: [
'svg-sprite-loader',
{
loader: 'svgo-loader',
options: {
enforce: 'pre',
plugins: [
// ...
{ removeAttrs: { attrs: '(fill|stroke)' } },
],
},
},
],
},
And everything is fine, but it don't actually work. I am getting in the console:
…/monoicon/cross.svg
Module build failed: Error: Error in parsing SVG: Non-whitespace before first tag.
Line: 0
Column: 1
Char: i…
Digging the web I have found:
It was a problem with the way I was loading it. you need to prefix
require("-!...when you're overriding other loaders...
https://github.com/jhamlet/svg-react-loader/issues/3#issuecomment-146334228
So it look like source of the problem is that I have to rules with svgo-loader. Rewrite webpack loaders rule in each svg import — kinda shitty idea. So how I may solve this in appropriate way?
Regards.