Svgr: Disable stripping viewBox

[tremby]

I must be looking in all the wrong places; sorry if so.

How can I disable stripping the viewBox attribute from SVGs?

Relatedly, is there a way to add a viewBox if it doesn't already exist? (i.e. turn width="w" height="h" into width="w" height="h" viewBox="0 0 w h")

[gregberge]

• Removing viewBox is relative to SVGO, so please refer to it and tricks config
• Adding viewBox is not possible, you have to write a h2x plugin to do it

[sonaye]

// in .svgrrc.js
module.exports = {
  svgoConfig: {
    plugins: {
      removeViewBox: false
    }
  }
};

[tremby]

Thanks, that got me on the right lines. That didn't work for me (I may have made a typo) but I saw in the options I can do a YAML file instead. I ended up writing a file .svgo.yml with the following contents:

plugins:
  - removeViewBox: false

[MadRabbit]

is there a way to specify this option with @svgr/webpack loader?

[MadRabbit]

okay, if anyone runs into the same thing. i've managed to make it work with webpack config like so:

js { test: /(icons|images)\/.*?.svg$/, use: [{ loader: '@svgr/webpack', options: { svgoConfig: { plugins: { removeViewBox: false } } } }, 'file-loader'] }

[tremby]

Any idea if there's a way to do that in a require statement, i.e. with no
special Webpack configuration?

[hubgit]

If you're configuring/disabling several svgo plugins, remember that they each have to be in a separate object:

svgoConfig: {
      multipass: true,
      plugins: [
        {
          cleanupIDs: {
            prefix: `svg-${componentName.toLowerCase()}-`,
          },
        },
        {
          removeViewBox: false,
        }
      ],
    },

[vlinder]

Any idea if there's a way to do that in a require statement, i.e. with no special Webpack configuration?

Keeping the viewBox attribute really should be the default..

[gregberge]

@vlinder you should submit a PR to SVGO.

[kushalmahajan]

The SVGO option in .svgrrc didn't work for me.
However, SVGR CLI has an option to preserve the viewBox attribute by passing in --icon flag.

Example

npx @svgr/cli --icon -d src/icons svg-icons --ext tsx

[wszzwpshh1]

Thanks, that got me on the right lines. That didn't work for me (I may have made a typo) but I saw in the options I can do a YAML file instead. I ended up writing a file .svgo.yml with the following contents:

plugins:
  - removeViewBox: false

Saved my day. .svgrrc didn't work for me since in my case the issue was in the rollup bundle plugin. Adding a .svgorc config fixed it.

[TemVin]

if use rollup.config, you can create .svgarc file
inside indicate:
plugins: {
removeViewBox: false
}