Is --fa-width and --fa-display intentionally not defined when using react svg?

[el-woodl]

This is more of a question:

I am using react svg icons and I noticed that the aspect ratio of an icon is not calculated dynamically based on the viewbox. resulting what should be squared icons to have bigger computed width:

This is a result of undefined --fa-width which means the following defaults to 1.25em.

Is this intended? I would expect the dimensions of the rendered svg to honour the aspect ratio of the viewbox but I may be missing something.

Thanks

[robmadole]

@el-woodl this is intentional. The top and bottom can extend 0.125em past the viewbox which results in 1em + 0.125em + 0.125em = 1.25em getting you to square. Are you having issues?

[el-woodl]

@robmadole it seems like I am not getting a squared svg icon render as shown in the computed value in my first screenshot. If I understood correctly, the way svg sizing works to allow for handling sizing through the font-size property value is by assigning width/height to "em" units. In the attached css (second screenshot)
So with font-size: 32px;
height: 1em (translates to 32x)
width: var(--fa-width, 1.25em) -> --fa-width is undefined so 1.25em is used which translates to 40px.

So we endup with an svg element that is 40x32. What I see in the viewbox of that particular icon (fa-gift) the viewbox on the element is: 0 0 512 512. Which means is designed as a square icon (as opposed to other icons in the library which are not squares). Shouldn't I get a 32x32px icon in that case?

The top and bottom can extend 0.125em past the viewbox which results in 1em + 0.125em + 0.125em = 1.25em getting you to square

Regarding the above, could you please explain to me how this works? Not sure if I understand.

[el-woodl]

@robmadole ok I think I get it. You always use that aspect ratio to ensure a consistent "canvas size" for all icons - unless the consumer (me 😆) uses some of the classes that do overwrite the --fa-width variable right?