regarding the icons type signature

[ceIia]

in #966, the type was updated to a very odd signature:

React.ForwardRefExoticComponent<Pick<React.SVGProps<SVGSVGElement>, "string" | "className" | "style" | "clipPath" | "filter" | "mask" | "path" | "children" | "role" | "type" | "href" | ... 460 more ... | "key"> & {
    ...;
} & React.RefAttributes<...>>

this feels very restrictive. what's the correct way to type a component property that expect an icon now?

i love heroicons, but in a component library setting, i cannot resort to forcing people to using heroicons, if they don't want to.

React.FC<any> is also not an acceptable solution (not using any leads to Typescript being annoyed if you pass any extra props to the component then).

[thecrypticace]

Yes, the signature is quite odd but it is correct now whereas it was not before. This is because this is the return type of React.forwardRef(…). Imo, the ref 2nd argument really should've been designed as a prop in React but it wasn't (probably due to a lot of historical decisions) and that leads to some of these weird type-level issues.

The problem with the original types is that:

1. Icons were incorrectly marked as a general component — not an "Exotic" one. I'm honestly not 100% sure why the React types need this distinction but they do appear to make it very intentionally.
2. The type of Icon['ref'] was incorrect — being inherited from SVGSVGElement (all HTML and SVG elements in react have a legacy ref property with a different type.

The correct type to use today is React.FC — but the generic is a bit more complicated if you don't want to use any:

// Option 1 — the types of all icons are currently the same, so this will work fine:
type MyIcon = React.FC<Parameters<typeof AcademicCapIcon>[0]>

// Option 2 — a more "correct" way to do it, but it's verbose:
// 1. This doesn't depend on Heroicons for types at all
// 2. I split SVG-related props and the Heroicons specific props out for readability because it looks nicer but you don't have to do that

type IconSVGProps = React.PropsWithoutRef<React.SVGProps<SVGSVGElement>> & React.RefAttributes<SVGSVGElement>
type IconProps = IconSVGProps & {
  title?: string
  titleId?: string
}

type MyIcon = React.FC<IconProps>

// For either of these versions the following will typecheck:
let x: MyIcon = AnyHeroiconsIconGoesHere

Does that help solve the issue for you? Or is there something else you were trying to achieve?

[ceIia]

appreciate these clarifications, totally agree with you.
this does indeed solve the issue. thanks!

[simensen]

// Option 2 — a more "correct" way to do it, but it's verbose:
// 1. This doesn't depend on Heroicons for types at all
// 2. I split SVG-related props and the Heroicons specific props out for readability because it looks nicer but you don't have to do that

type IconSVGProps = React.PropsWithoutRef<React.SVGProps> & React.RefAttributes
type IconProps = IconSVGProps & {
title?: string
titleId?: string
}

type MyIcon = React.FC

Can these types somehow be part of the react/typescript package?

I just went through the process of reverse engineering the icon types again and would love to have something stable to type against from the package itself instead of having to keep it updated on my side in every project I'm using heroicons.

[thejayhaykid]

// Option 2 — a more "correct" way to do it, but it's verbose:
// 1. This doesn't depend on Heroicons for types at all
// 2. I split SVG-related props and the Heroicons specific props out for readability because it looks nicer but you don't have to do that
type IconSVGProps = React.PropsWithoutRef<React.SVGProps> & React.RefAttributes
type IconProps = IconSVGProps & {
title?: string
titleId?: string
}
type MyIcon = React.FC

Can these types somehow be part of the react/typescript package?

I just went through the process of reverse engineering the icon types again and would love to have something stable to type against from the package itself instead of having to keep it updated on my side in every project I'm using heroicons.

Another vote for this, publishing a simpler type from the heroicons package itself seems like it would be the cleanest option instead of adding all this boiler plate all the time.