Custom icons: Typescript and ESLint errors in Next.js 14

[Ionel lupu]

Describe the bug

Copy paste a custom icon example from the readme page into your Nextjs 14 project:

import { forwardRef, ReactElement } from "react";
import { Icon, IconBase, IconWeight } from "@phosphor-icons/react";

const weights = new Map<IconWeight, ReactElement>([
  ["thin", <path d="..." />],
  ["light", <path d="..." />],
  ["regular", <path d="..." />],
  ["bold", <path d="..." />],
  ["fill", <path d="..." />],
  [
    "duotone",
    <>
      <path d="..." opacity="0.2" />
      <path d="..." />
    </>,
  ],
]);

const CustomIcon: Icon = forwardRef((props, ref) => (
  <IconBase ref={ref} {...props} weights={weights} />
));

CustomIcon.displayName = "CustomIcon";

export default CustomIcon;

Getting a Typescript error:

TS2322: Type
ForwardRefExoticComponent<Omit<IconProps, 'ref'> & RefAttributes<SVGSVGElement>>
is not assignable to type Icon
Types of property defaultProps are incompatible.
....

Expected behavior

To not get any errors

Screenshots

Getting this error:

Context (please complete the following information):

Additional notes

This error wasn't there prior to updating Nextjs (and related packages) from Nextjs 13 to Nextjs 14

[Ionel lupu]

Looks like as Icon fixes the issue:

const CustomIcon: Icon = forwardRef((props, ref) => (
    <IconBase ref={ref} {...props} weights={weights} />
)) as Icon;

I think the docs need to be updated to reflect it