Allow more types of Icons as IconProps

[nikolaischunk]

Goal

I would like to use lucide (or any other) icon library for my icons in the expandIcon button variant.
When doing so tho, the type is not allowing it.
I managed to get around this by changing in the IconProps the Icon type to React.ReactNode and updating the Icon use from <Icon /> to {Icon}.
This allows me to use the Icon like this:

Problem

Now i have the problem that the expanding Animation for the Icon is not working anymore / the Icon is not showing up at all.
Could you help / update the code to allow other Icons to be animated too?

Resources

Reproduction Link: BirthdayyBot/dashboardV2

[nikolaischunk]

Found a solution, will open PR

[jakobhoeg]

I don't think any of this is necessary.
Just tried using a lucide icon and it works fine as is.

[nikolaischunk]

I don't think any of this is necessary. Just tried using a lucide icon and it works fine as is.

Can you show me your Implementation? It wasn't working for me.

[jakobhoeg]

I don't think any of this is necessary. Just tried using a lucide icon and it works fine as is.

Can you show me your Implementation? It wasn't working for me.

import { ArrowRight } from "lucide-react";

<Button variant="expandIcon" Icon={ArrowRight} iconPlacement="right">
Test
</Button>

[nikolaischunk]

Try adding properties to the ArrowRight (like color etc) and you'll see what Issue I run into. I did not know how I could add them without passing a whole Element.
--> https://lucide.dev/guide/basics/color