react-icons v5 (required by ui/package.json) is not type compatible with icon prop in components like Alert

[akshetpandey]

• I have searched the Issues to see if this bug has already been reported
• I have tested the latest version

Steps to reproduce

Sample form https://flowbite-react.com/docs/components/alert#alert-with-icon

import { HiInformationCircle } from "react-icons/hi";
import { Alert } from "flowbite-react";

function Component() {
  return (
    <Alert color="failure" icon={HiInformationCircle}>
      <span className="font-medium">Info alert!</span> Change a few things up and try submitting again.
    </Alert>
  );
}

This will produce a TS error: HiInformationCircle:IconType is not assignable to icon:FC<SVGProps<SVGSVGElement>>

[victorfunes]

I found the same, and as a work around I defined this type:

export type IconSVGProps = React.PropsWithoutRef<React.SVGProps<SVGSVGElement>> & React.RefAttributes<SVGSVGElement>;
export type FlowbiteIconProps = IconSVGProps & {
  title?: string;
  titleId?: string;
};

export type FlowbiteIcon = FC<Omit<SVGProps<SVGSVGElement>, "ref">> & FlowbiteIconProps;

then you can do something like this in the flowbite components with the issue:

icon={FilmIcon as FlowbiteIcon}