You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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:
...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:
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:
You could dynamically add / remove an attribute based on passing in custom width / height props.
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.
The text was updated successfully, but these errors were encountered:
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:
...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:
But, at least in the case of the exported Material Symbols package, that's just not true. It has 3 additional attributes:
width
,height
, andviewBox
. 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:
width
/height
. That makes it trivial to apply CSS to SVGs without height and width, and AFAIK, it should still auto-resize based on theviewBox
dimensions; alternatively:... 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.
The text was updated successfully, but these errors were encountered: