Two svgo-loader conflict

Viewed 3179

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.

1 Answers
Related