Cannot override options>rule>use to render SVG properly

[piotrmarkiewicz]

If two svgs have same classes, classes overrides each other:

<!-- should be red - but it's green -->
<svg viewBox="0 0 4 4" style="height: 100px;">
  <style>.circle_class{fill:red;}</style>
  <circle class='circle_class' cx="2" cy="2" r="2"/>
</svg>
<!-- should be green - and it is -->
<svg viewBox="0 0 4 4" style="height: 100px;">
  <style>.circle_class{fill:green;}</style>
  <circle class='circle_class' cx="2" cy="2" r="2"/>
</svg>

To prevent this sitution, svg-react-loader colud add file name as class prefix using 'classIdPrefix' via gatsby-plugin-react-svg this way:

actions.setWebpackConfig({
  module: {
    rules: [
      {
        test: /\.svg$/,
        include,
        exclude,
        ...otherProps,
        use: {
            loader: 'svg-react-loader',
            options: {
                filters,
                classIdPrefix: true
            }
        },
      }
    ],
  }
})

It's impossible now. I see that anything can be passed through via '...otherProps', but 'use' will be overridden anyway.