Can't set SVGO options

🐛 Bug Report

I need basically need to keep the svg viewBox when using @svgr/webpack.

I tried every piece of documentation I found spread among web pages and tickets previously opened in git.

svgr/webpack version: 5.1.0 webpack version: 4.29.6

To Reproduce

Configurations I tried:

webpack config file:

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

in .svgorc:

plugins:
	- removeViewBox: false

with the webpack config file I tried inside my application: import svgfileurl , { ReactComponent as svgFile } from 'whatevever.svg'

both svgfileurl and svgFile return a function which returns a reactComponent

Expected behavior

For the viewBox attribute to be preserved

Any ideas?

[gregberge]

@VityaSchel you should give a look to SVGO documentation.

[kbouchard]

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,
          }],
        }
      },
    },
  ],
},