Preserving viewBox

[troch]

Hi,

First of all, thank you for this amazing library, it is great!

With version 1.0.0, viewBox is dropped. In my case I have some illustrations that I inline, they are not icons but I still need viewBox to scale them.

I would be happy to contribute and help, but in order to understand where you come from: what is the rationale behind removing viewBox for "non-icons"?

[gregberge]

Hi, after #17 I think adding an option « viewBox » and defaulting it to true is the best thing. I think viewBox doesn’t add a lot of data and give ability to resize, it is pretty common with SVG. @troch feel free to make a PR, else I will do it as soon as I have a moment.

[edorivai]

For future googlers (like me). It seems the information in this issue is outdated, viewbox settings are now delegated to the svgoConfig. See https://github.com/smooth-code/svgr/issues/142

Webpack snippet:

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

[gregberge]

@edorivai yes you are right, viewBox is svgo job!

[panayotoff]

Note, that in order to work now { removeViewBox: false } should be passed at array:

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

[harshalpatel91]

Hi,

How to handle this in @svgr/rollup, I mean how to write this config in rollup

[tomolenet]

Hi,

How to handle this in @svgr/rollup, I mean how to write this config in rollup

For me this one works:

svgr({
  svgoConfig: {
    plugins: {
      removeViewBox: false
    }
  }
}),

[baotlake]

https://github.com/webpack-contrib/image-minimizer-webpack-plugin/issues/190

{
    plugins: [
      {
        name: 'removeViewBox',
        active: false
      },
    ]
  }

[gregberge]

Give a look to: https://react-svgr.com/docs/migrate/#svgo

[MDSmpacini]

rollup plugin tune

svgr({
          svgoConfig: {
              plugins: [
                  {
                      name: 'preset-default',
                      params: {
                          overrides: {
                              removeViewBox: false,
                          },
                      },
                  }
              ]
          }
      })

[thewanionly]

Note, that in order to work now { removeViewBox: false } should be passed at array:

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

New update on this one. If you encounter this error: Error: Plugin name should be specified, you need to update to the ff:

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

Source: https://stackoverflow.com/a/73089859/9608615