IconProps type is incompatible with icons components

[rtivital]

The following code will have a TypeScript error:

import { IconCreditCard, IconProps } from "@tabler/icons-react";

// Error about incompatible `ref` prop
function TestIcon(props: IconProps) {
  return <IconCreditCard {...props} />;
}

Sandbox with a reproduction – https://codesandbox.io/p/sandbox/mantine-react-template-forked-jhy3jl?file=%2Fsrc%2FApp.tsx%3A3%2C1-7%2C2

The error is gone once ref prop is removed:

// ok
function TestIcon(props: Omit<IconProps, 'ref'>) {
  return <IconCreditCard {...props} />;
}

To fix types mismatch change IconProps type from

interface IconProps extends Partial<Omit<React.SVGProps<SVGSVGElement>, 'stroke'>> {
    size?: string | number;
    stroke?: string | number;
}

to

interface IconProps extends Partial<Omit<React.ComponentPropsWithoutRef<'svg'>, 'stroke'>> {
  size?: string | number;
  stroke?: string | number;
}

[diego-menezes]

i cant't use newer version becasue this bug...

[diego-menezes]

@rtivital you know a workarround for this?

[diego-menezes]

the solution for me

in 2.x i use

export interface Acao {
...
    icone: (props: TablerIconsProps) => ReactElement;
...
}

now in 3.2.0

export interface Acao {

    icone: React.ExoticComponent<React.RefAttributes<Icon>>;

}

and where i used Icon in props needs no changes.

export const menu: Acao[] = [
  {
...
    icone: IconDashboard,
...
  },
....