React 19 Compatibility (forwardRef) #137
Description
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