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
I have a pretty specific scenario, but I think it's valid.
I want to set a default height of 1em and width of unset. I need the unset so when I override the height in certain specific cases, I don't have to also set the width to avoid the wrong aspect ratio. This package sets a default of 1em for both width and height (I think it should really only be height, like Font Awesome does in their default styles for inline SVGs). If I set these via a className or style on IconContext.Provider, due to CSS specificity and the required order of my imports, when I need to override the size on a specific icon, I need to use !important.
Speaking more broadly, I'm a bit confused as to why the provider is the way it is. Couldn't value simply be of type ComponentProps<"svg">, i.e. just accept any attributes that could go on an SVG element, including style, className, color (to fill: currentColor), size (to height: 1em) and everything else you currently have. Seems simpler and more straightforward. Then the user can always override anything there, no doubt. Maybe something to consider for the next major version...?
Solution
As described in the title.
Minimal sample repository URL
No response
Additional context
No response
The text was updated successfully, but these errors were encountered:
Describe
I have a pretty specific scenario, but I think it's valid.
I want to set a default height of
1em
and width ofunset
. I need theunset
so when I override theheight
in certain specific cases, I don't have to also set the width to avoid the wrong aspect ratio. This package sets a default of1em
for both width and height (I think it should really only be height, like Font Awesome does in their default styles for inline SVGs). If I set these via aclassName
orstyle
onIconContext.Provider
, due to CSS specificity and the required order of my imports, when I need to override the size on a specific icon, I need to use!important
.Speaking more broadly, I'm a bit confused as to why the provider is the way it is. Couldn't
value
simply be of typeComponentProps<"svg">
, i.e. just accept any attributes that could go on an SVG element, includingstyle
,className
,color
(tofill: currentColor
),size
(toheight: 1em
) and everything else you currently have. Seems simpler and more straightforward. Then the user can always override anything there, no doubt. Maybe something to consider for the next major version...?Solution
As described in the title.
Minimal sample repository URL
No response
Additional context
No response
The text was updated successfully, but these errors were encountered: