Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
IonelLupu opened this issue May 28, 2024 · 1 comment · Fixed by #103
Closed

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

IonelLupu opened this issue May 28, 2024 · 1 comment · Fixed by #103
Assignees
Labels
bug Something isn't working

Comments

@IonelLupu
Copy link

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:
image

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

@IonelLupu IonelLupu added the bug Something isn't working label May 28, 2024
@IonelLupu
Copy link
Author

IonelLupu commented May 28, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants