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
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,
forwardRefcan't be used and results in a warning (eg. by ESLint rule@eslint-react/no-forward-ref).Trying to compose without using
forwardRefresults in a Typescript error, possibly due to internal usage ofForwardRefExoticComponent:Example with error:
Expected behavior
It works without issues.
Context (please complete the following information):
allall@phosphor-icons/react@phosphor-icons/react": "2.1.10