[Feature]: Allow `attr` to override `width` and `height`

[vincerubinetti]

Describe

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

[TheAifam5]

I was also disappointed when I tried to set the height from a CSS class with tailwind. :/

[remcode-remco]

I was also disappointed when I tried to set the height from a CSS class with tailwind. :/

This works, but for height and width, so both. The trick is not to specify a size for the icon, but instead do it with Tailwind's text-xl classes:

    <IconContext.Provider value={{ color: "text-gray-800", className: "text-4xl md:text-5xl" }}>
          <IoMdPerson />
    </IconContext.Provider>