[Feature request] Changing default size of SVGs

[matthew-dean]

Thanks so much for these packages!

For my app, I would like to set a default width / height to 1.5em for icons. (It looks better / more balanced next to text because of glyph height, and Material Symbols actually uses this as its default size.) I thought about doing this:

/** Auto-size @iconify icons */
svg[role="img"][aria-hidden="true"] {
  height: 1.5em;
  width: 1.5em;
}

...But then I realized that I want to be able to override the size of the icons at will. In other words, I could pass in height / width values, but then they would be over-ridden.

The docs say:

By default, all icons have only two attributes: role="img" and aria-hidden="true"

But, at least in the case of the exported Material Symbols package, that's just not true. It has 3 additional attributes: width, height, and viewBox. I understand the necessity for viewBox, but not of height and width, because it makes setting defaults challenging (I'd prefer not to use a Proxy for every icon).

So, a few ideas:

1. You could remove width / height. That makes it trivial to apply CSS to SVGs without height and width, and AFAIK, it should still auto-resize based on the viewBox dimensions; alternatively:
2. You could dynamically add / remove an attribute based on passing in custom width / height props.
3. You could allow extending icons without using a Proxy. (There are several methods that could achieve this.)

... or some other solution I'm not thinking of.

Additionally, could you possible export SVGs to have some label / identifier that associates them with iconify (to make those SVGs uniquely selectable)? I'm hesitant to stick with svg[role="img"][aria-hidden="true"] because there's no guarantee that other packages / SVGs won't have those attributes.

Thanks for considering.

[cawa-93]

In the docs I describe how you can change default attributes: https://github.com/cawa-93/iconify-prerendered?tab=readme-ov-file#customizing-icon-default-attributes

Basically you just create a wrapper component that may accept some props, logic, set some attributes or whatever you need.