<Visa width={20} /> does not scale

[kopax]

Hi and thanks for sharing.

I am a package author and also have some experience with svg package made for react.

In a react-native project, I am using <Visa width={20} /> and at my big surprise, those svg does not scale.

For scaling, you need to set width=100% and height=100% from <svg />, the viewBox="0 0 750 471" is enough.

Just because of this, this package became useless and I had to import all those files manually in my projects.

[muffinresearch]

What is the Visa component a reference to in your case? Is that the svg or your own component?

[kopax]

It is svgr that turn it into a react component.

[muffinresearch]

Have you tried using --no-dimensions / {dimensions: false} with svgr? Also you might want to check how --expand-props / expandProps is configured.

[kopax]

No I did not, I might have a look in the future, but I do not always have svgr and I still expect svg to be scalable, I prefer to use the wrapper to set the dimensions.

This is the reason why I always set the dimensions to 100% in my svg.

[MarianAlexandruAlecu]

I had the same issue and it works (at least on web) with this webpack config:

{
	test: /\.svg$/,
	use: {
		loader: '@svgr/webpack',
		options: {
			dimensions: false,
		},
	},
},

Now I can scale the icons from CSS