[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.

[jackzzs]

I have the same suggestion. The biggest problem for me is that how to define the default proxy in one file and use it in all Vue components without redefining it, and still have tree-shaking? If you can make a documentation about this common usage, I'll be very appreciated.