Changing font size doesn't work with SVGR and Tailwind

[da-kicks-87]

Hello,

I am able to import the svgs as React components into my Next.js App via SVGR. They render in the browser.

I am having problem changing the size of the icons by font size.

I have added this to my global css to change the icons by font size:

svg {
    width: 1rem;
    height: 1rem;
    fill: currentColor;
  }

I then call the components with Tailwindcss class like this:
<Face className="text-8xl" />

In the browser the Face icon gets cropped and is not the correct size.

Any ideas why?

[marella]

Hi,

You should use em not rem to change size by font size as mentioned here:

svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
}

[da-kicks-87]

Hi yes, you are right, using em units should be used in order to change its' size by font size. I am more accustomed to using mostly rem units because Tailwind and other CSS frameworks use them.

Anyways I have also tried with em units as in your example. More of the icon is shown, but still a cropping problem.

React compoents with Tailwind font classes.

<Face className="text-3xl" /> <Star className="text-3xl" />
Screenshot of the crop:

Could it be that svg themselves are not optimized?

[marella]

Are you using the latest version of material-symbols? Similar issue used to be present in older versions (< 0.4.0) due to SVGs missing viewBox property.

[da-kicks-87]

I have installed the material-symbols/svg-400 package. I only need the svgs. It is the latest version 0.4.2

I have inspected the react rendered svgs, they don't have the viewBox property.

[da-kicks-87]

I have compared the SVG code from this repo the the SVGs that are rendered on my app. In this repo the SVGs do have the viewBox attribute, but when they are rendered on my App with SVGR they are missing the viewBox attribute.

This would be an issue with SVGR then?

[marella]

Sorry for the late response. I think SVGR uses SVGO under the hood which removes viewBox by default. You can disable removeViewBox plugin in your SVGO config.
Please see SVGO README and this issue for more info.

[MaKTaiL]

I'm having a hard time adjusting the size of these icons. I changed to 'em' instead of 'rem' and it is still not working. I don't know what to do honestly.