React 19 Compatibility (forwardRef)

The composability of custom icons, as stated in the docs, is not compatible with React 19. React 19 deprecated the use of forwardRef (see here: https://react.dev/reference/react/forwardRef)

When trying to compose a custom icon, forwardRef can't be used and results in a warning (eg. by ESLint rule @eslint-react/no-forward-ref). Trying to compose without using forwardRef results in a Typescript error, possibly due to internal usage of ForwardRefExoticComponent:

Property '$$typeof' is missing in type '{ (props: any, ref: any): Element; displayName: string | undefined; }' but required in type 'ForwardRefExoticComponent<IconProps>'

Example with error:

const MyIcon: PhosphorIcon = (props) => (
  <PhosphorIconBase viewBox="0 0 24 24" ref={props.ref} {...props} weights={myIconWeights} />
);
MyIcon.displayName = "MyIcon";

Expected behavior

It works without issues.

Context (please complete the following information):

• OS: all
• Browser/Environment all
• Library @phosphor-icons/react
• Version @phosphor-icons/react": "2.1.10

i'm getting this error while trying to use this icon in Next.js project I guess i have to keep using the svg until it get fixed.