Icons don't match the exported type in @tabler/icons-react

[th0th]

The icons in @tabler/icons-react don't seem to match the exported type Icon. Typescript shows an error like this:

TS2322: Type
ForwardRefExoticComponent<Omit<IconProps, "ref"> & RefAttributes<Icon>>
is not assignable to type Icon

Here I created an example on codesandbox. You can see the error in App.tsx on line 4. https://codesandbox.io/p/sandbox/gracious-fast-t362lv?file=%2Fsrc%2FApp.tsx

[CHE1RON]

Maybe related to https://github.com/tabler/tabler-icons/issues/1035 (which contains a possible workaround) 🤔

[th0th]

Thank you @CHE1RON. I also created my custom type as a workaround. But getting rid of it, and using the type from the package would be easier :)

[CHE1RON]

Would you be willing to share your workaround? I experienced some issue in v3.3.0 and could give it a try 😉

[th0th]

Would you be willing to share your workaround? I experienced some issue in v3.3.0 and could give it a try 😉

Of course. I use this one:

import { Icon, IconProps } from "@tabler/icons-react";
import { ForwardRefExoticComponent, RefAttributes } from "react";

export type TablerIcon = ForwardRefExoticComponent<Omit<IconProps, "ref"> & RefAttributes<Icon>>;