Changing size of the svg doesn't change the size of the content

🐛 Bug Report

I have created svg components successfully, but changing width or height doesn’t change icon size at all.

To Reproduce

Example created icon:

import * as React from 'react';

function SvgBurger(props: React.SVGProps<SVGSVGElement>) {
    return (
        <svg width={24} height={24} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
            <path
                d="M18.54 12.258A6.547 6.547 0 0012 5.718a6.547 6.547 0 00-6.54 6.54c.001.043.008.086.02.128v3.348a2.55 2.55 0 002.548 2.548h7.944a2.551 2.551 0 002.548-2.548v-3.348a.47.47 0 00.02-.128zM6.427 15.052v-1.08c.184.048.36.12.525.216.314.165.704.37 1.422.37.717 0 1.108-.205 1.422-.37.277-.146.497-.261.981-.261s.704.115.982.261c.313.165.704.37 1.422.37s1.108-.205 1.422-.37c.278-.146.498-.261.982-.261s.704.115.981.261c.247.13.543.282 1.005.343v.52H6.428zm10.58-1.702c-.314-.165-.704-.37-1.422-.37s-1.109.205-1.423.37c-.277.146-.497.261-.981.261s-.704-.115-.982-.261c-.314-.165-.704-.37-1.422-.37s-1.108.205-1.422.37c-.278.146-.498.261-.982.261-.483 0-.703-.115-.98-.261-.24-.126-.526-.275-.966-.338v-.28h11.144v.84a1.996 1.996 0 01-.564-.222zM12 6.666a5.6 5.6 0 015.572 5.118H6.428A5.6 5.6 0 0112 6.666zm3.972 10.668H8.028A1.602 1.602 0 016.452 16h11.097a1.602 1.602 0 01-1.577 1.335z"
                fill="#000"
            />
            <path
                d="M9.03 9.25l-.831.453.32.585.83-.453-.318-.586zM12.54 9.763l-.152.65.921.216.153-.649-.922-.217zM10.838 7.688l-.153.649.921.217.153-.65-.921-.216zM15.092 8.45l-.497.444.631.706.497-.444-.631-.706z"
                fill="#000"
            />
        </svg>
    );
}

export default SvgBurger;

Expected behavior

I have worked with SVG React components, but normally it’s supposed to change size where it doesn’t now.

Link to repl or repo (highly encouraged)

https://codesandbox.io/s/friendly-andras-yxtev?file=/src/App.tsx

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

Paste the results here:

## System:
 - OS: macOS 11.0
 - CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
 - Memory: 103.36 MB / 16.00 GB
 - Shell: 5.8 - /bin/zsh
## Binaries:
 - Node: 12.18.1 - /usr/local/bin/node
 - Yarn: 1.22.4 - /usr/local/bin/yarn
 - npm: 6.14.5 - /usr/local/bin/npm

[rsbh]

few days back i got the same issue with webpack and rollup. in weback config file i added this rule

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

and there was already file-loader preconfigured which was handling the svg file. so i removed the svg from the file loader test. then it started working. make sure no other loader is handling svg in your webpack config.

[polarathene]

@hacknlove your problem was the viewbox should be viewBox, the plugin specifically looks for that, and my Inkscape appears to correctly save viewBox as well, did you by any chance manually add that?