Supertype for icons?

[RobRoseKnows]

As of #64, there's now Typescript types for the icons. I was hoping though that there could be some sort of "supertype" for all the icons, so that I could define a React component that would require an icon instead of just a generic ReactNode. My usecase is I'm trying to make a generic version of this component from Tailwind UI, and it would be nice if I could make it so a generic icon could be provided.

[timroes]

Since all icons are just taking svgs props into them (since they are just that), you can define a type for any generic icons, like:

type Icon = React.ComponentType<React.ComponentProps<'svg'>>;

[RobRoseKnows]

Good point, I ended up figuring that out and forgot to close earlier. Thanks!

[jaidetree]

It seems in a recent update that definition no longer applies. Anyone know what it should be now?

[michaelphines]

This works for me:

export type HeroIcon = React.ComponentType<
  React.PropsWithoutRef<React.ComponentProps<"svg">> & {
    title?: string | undefined;
    titleId?: string | undefined;
  }
>;

I think you can also just do something like get the typeof an example icon:

import { PencilIcon } from "@heroicons/react/24/outline";
export type HeroIcon = typeof PencilIcon;

Both have upsides and downsides.