[Icon]: Icons are only able to be square, but there are some which are rectangular

[AlanBreck]

E.g. payment-stripe-color.

[fallaciousreasoning]

I think, that in that case, we should change the icon in Figma. cc @aguscruiz?

[aguscruiz]

We should allow for different aspect ratios, this already happens with the flag icons. There are some cases where we'll need to break that square format

[petemill]

How about we read the aspect ration at ingestion time, and enforce that in css? Then the consumer only needs to specify the --leo-icon-size, which we would apply to width and leave the aspect ratio to determine the height. Most icons would be 1:1 and some would not be.

[fallaciousreasoning]

That said, what about custom icons? We won't know the aspect ratio there.

Additionally (and it may not be a concern) it means clients would need to pull in a list of aspect ratios for all icons (even if they only use a couple of icons).

Maybe we should just make it possible to override the aspect-ratio?

[AlanBreck]

That said, what about custom icons? We won't know the aspect ratio there.

For custom icons, I think exposing the width and height as CSS variables is the best way to go.

Additionally (and it may not be a concern) it means clients would need to pull in a list of aspect ratios for all icons (even if they only use a couple of icons).

I don't think this is the case. If it's baked into a meta file with icon names as keys, the Icon component could automatically set the aspect ratio, yes?

[fallaciousreasoning]

Exactly - but that meta file would get pulled in (with the aspect ratio of all the icons) even if you only used a few of them.

[AlanBreck]

Grasping at straws a bit here, but could it calculate it via the viewbox attribute on the SVG?

[fallaciousreasoning]

It could, but then we'd need to download the SVG twice (once as the background image, once via a fetch to read it), so we'd be depending on the caching strategy people have setup