How to disable auto prefixing class names in svgoConfig of @svgr webpack?

Question

@svgr/webpack (https://react-svgr.com/docs/webpack/) is changing the name of classes in svg, by prefixing them, for example class circle is changed to spinner-svg__circle.

I have already tried the below two options to disable that behaviour, but none of them worked:

1. source: https://github.com/gregberge/svgr/issues/411 and https://github.com/gregberge/svgr/pull/412/files

        {
          test: /\.svg$/,
          use: [
            {
              loader: '@svgr/webpack',
              options: {
                svgoConfig: {
                  plugins: [{ prefixIds: false }]
                }
              }
            },'url-loader'
          ]
        }
   

2. the below one I found here: Pass options to the builtin svgo from svgr/webpack

           svgoConfig: {
              plugins: [
                {
                  prefixIds: {
                    prefixIds: false,
                    prefixClassNames: false
                  }
   
                }
              ]
            }
   

3. source: https://github.com/gregberge/svgr/issues/400

            svgoConfig: {
              plugins: [
                {
                  prefixIds: {
                    prefix: false
                  }
                }
              ]
            }
   

Is there any other way to solve it?

Answer 1

So the 2) option works - I couldn't get it working because there was a separate webpack config file for a storybook (where I tested effects), and I instead of applying changes there, I applied them to the main webpack config file of the project.