themesberg / flowbite-react

Official React components built for Flowbite and Tailwind CSS
https://flowbite-react.com
MIT License
1.77k stars 395 forks source link

Incompatible icons for icon={} props #1398

Open j-vitali opened 1 month ago

j-vitali commented 1 month ago

basically I use tsx with tabler-icons... I want to wrap my svg ico directly in icon={} props, but got ts error:

Steps to reproduce

  1. User tabler-icons/react
  2. Create a dropdown
  3. Add icon
  4. it works ok, but showing warning error.

Current behavior

Ts error

Expected behavior

Everything working fine, this is for all icon={} props not only for dropdown... :D

Context

Screenshot 2024-05-22 alle 23 15 44
dhavalveera commented 1 month ago

Hey @j-vitali ,

can you try pass IconTrash as like <Dropdown.Item className="text-red-600" icon={IconTrash} /> and see if that's working for you?

vitalijalbu commented 1 month ago

Hey @j-vitali ,

can you try pass IconTrash as like <Dropdown.Item className="text-red-600" icon={IconTrash} /> and see if that's working for you?

yes if works, but still is red line message eslint... :D

dhavalveera commented 1 month ago

Hey @j-vitali , can you try pass IconTrash as like <Dropdown.Item className="text-red-600" icon={IconTrash} /> and see if that's working for you?

yes if works, but still is red line message eslint... :D

the ESLint Error remains same?

vitalijalbu commented 1 month ago

Hey @j-vitali , can you try pass IconTrash as like <Dropdown.Item className="text-red-600" icon={IconTrash} /> and see if that's working for you?

yes if works, but still is red line message eslint... :D

the ESLint Error remains same?

yes right.

dhavalveera commented 1 month ago

Hey @j-vitali , can you try pass IconTrash as like <Dropdown.Item className="text-red-600" icon={IconTrash} /> and see if that's working for you?

yes if works, but still is red line message eslint... :D

the ESLint Error remains same?

yes right.

are you using Icons from react-icons?

vitalijalbu commented 1 month ago

Hey @j-vitali , can you try pass IconTrash as like <Dropdown.Item className="text-red-600" icon={IconTrash} /> and see if that's working for you?

yes if works, but still is red line message eslint... :D

the ESLint Error remains same?

yes right.

are you using Icons from react-icons?

no, as you can see i use tabler icons

nhatle-684 commented 1 month ago

I also has the same error with flowbite-react-icons image

SutuSebastian commented 1 week ago

For now just cast it as the DropdownItem icon type:

<Dropdown.Item className="text-red-600" icon={IconTrash as FC<ComponentProps<"svg">>} />