svgr icon indicating copy to clipboard operation
svgr copied to clipboard

How can I inactive the removal of viewBox in version 7.0.0?

Open saseungmin opened this issue 2 years ago • 1 comments

🐛 Bug Report

A clear and concise description of what the bug is.

I inactived the removal of viewBox as follows in version 6.5.1

// https://react-svgr.com/docs/next/
// next.config.js
  webpack: (config) => {
    const fileLoaderRule = config.module.rules.find((rule) => rule.test?.test?.('.svg'));

    config.module.rules.push(
      {
        ...fileLoaderRule,
        test: /\.svg$/i,
        resourceQuery: /url/,
      },
      {
        test: /\.svg$/i,
        issuer: /\.[jt]sx?$/,
        resourceQuery: { not: /url/ },
        use: [{
          loader: '@svgr/webpack',
          options: {
            svgoConfig: {
              plugins: [{
                name: 'removeViewBox',
                active: false,
              }],
            },
          },
        }],
      },
    );

    fileLoaderRule.exclude = /\.svg$/i;

    return config;
  },

I tried with the same settings after migrating to version 7.0.0, but the viewBox was still removed.

To Reproduce

Steps to reproduce the behavior:

node version: v16.19.1 next.js: v13.3.1 @svgr/webpack: v7.0.0

Please refer to the above explanation.

Expected behavior

A clear and concise description of what you expected to happen.

The viewBox must not be removed.

Link to repl or repo (highly encouraged)

Please provide a minimal repository on GitHub.

Issues without a reproduction link are likely to stall.

Run npx envinfo --system --binaries --npmPackages @svgr/core,@svgr/cli,@svgr/webpack,@svgr/rollup --markdown --clipboard

Paste the results here:


saseungmin avatar Apr 29 '23 08:04 saseungmin

I had the same issue. The configuration changed. I now use this:

loader: '@svgr/webpack',
options: {
	svgoConfig: {
		plugins: [
			{
				name: 'preset-default',
				params: {
					overrides: {
						removeViewBox: false
					}
				}
			}
		]
	}
}