svgr: Can't set SVGO options

@VityaSchel you should give a look to SVGO documentation.

Use svgo in option instead of svgoConfig.

Hey guys, I just went through the same issue on v5.2.0 . After trying a lot of things, nothing worked.

So I downgraded to 4.3.3 , using the config below and it’s working for me now.

// SVG: imported and rendered inline from JS files
svgInline: {
  test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
  issuer: {
    // Only inlining svg loaded from jsx? files
    test: /\.jsx?$/,
  },
  use: [
    'babel-loader',
    {
      loader: '@svgr/webpack',
      /*
        Using .svgo.yml for now to prevent the removeViewBox issue
      */
      options: {
        svgoConfig: {
          // See: https://github.com/svg/svgo#what-it-can-do
          // Important! We need to stick to @svgr/weback v4.3.3 to prevent an issue
          // where removeViewBox is not applied (still not fixed in 5.2.0).
          plugins: [{
            removeViewBox: false,
            removeTitle: false,
            convertShapeToPath: false,
            mergePaths: false,
          }],
        }
      },
    },
  ],
},

Extra information:

I downgraded the library to 4.3.3 and svgo and svgoConfig options don’t work either.

I don’t know it needs to be investigated.

Thanks for your suggestion @gregberge, but it didn’t work either.

Here’s how I tried:

{
   test: /\.svg$/,
   use: [{
      loader: '@svgr/webpack',
      options: {
         svgo: {
            plugins: [{
               removeViewBox: false
            }]
         }
      }
   }]
},

I only get <svg> in the dom.

Also double checked my svg, which looks like: <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26.82 42.81">

What else could be causing this annoying issue?

I’m getting Plugin name should be specified error

This syntax works, but I need to pass options.

{
  name: 'removeViewBox',
  active: false
}

All examples I saw are using

removeViewBox: {
   // options here
}

But I can’t use this config format because of this error. Is there a documentation on how to pass options to plugins?

Ok, after some invastigation i found how to make it work.

This does not work:

  const svgoConfig = {
    plugins: [
      {
        convertColors: {
          currentColor: true,
        },
        prefixIds: {
          prefix: componentName
        }
      },
    ],
  };

This works (note each plugin settings must be in its own object)

  const svgoConfig = {
    plugins: [
      {
        convertColors: {
          currentColor: true,
        }
      }, {
        prefixIds: {
          prefix: componentName
        }
      },
    ],
  };

Maybe we could ehance the extendPlugins function to handle this.