Hi. what the type of a lucide-react icon is?

[skdishansachin]

Does anyone know what is the type of a lucide-react icon?

[zoharma]

I'm not sure if this is what you meant, but it generates an inline SVG element.

You can find more info here - https://lucide.dev/guide/packages/lucide-react

[sovetski]

I think @skdishansachin means in typescript, if we have an object with "icon" key, what type of return we have to add? I also need this

Edit:

Ok I found the solution:

import { LucideIcon } from "lucide-react";

export type TestInterface = {
  title: string;
  icon: LucideIcon;
};

And when you use your TestInterface, you have to use like this:

import { ArrowBigUp } from "lucide-react";

const test: TestInterface = {
  title: "Test title",
  icon: ArrowBigUp // be careful, don't use as a component like <ArrowBigUp />
}

[ThalyssonLeite]

Why not to use? You are being informative with this, not instructive.

[tolgamorf]

Yes, this is correct. The correct type is: React.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & React.RefAttributes<SVGSVGElement>>, and LucideIcon is an alias for this type.

[Robots-Pixels]

Thank you very much @sovetski, I ran into the same issue.

@tolgamorf, I actually discovered the same thing by hovering over the imported icon in VS Code, and saw exactly what you mentioned. I’ll make sure to rely on that trick next time. What’s a bit amusing is that we could technically use the full type
React.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & React.RefAttributes<SVGSVGElement>>

instead of the alias

[Godcoder696]

Well you can use React.JSX.Element .

Exmaple:
interface Props{ icon: React.JSX.Element; }

[Neil-Lunavat]

Can you share how it works after importing? Do we just go test.icon and it becomes that or do we have to wrap it in <> brackets?

[skdishansachin]

What do you mean exactly?

[Jahid0178]

If anyone use DynamicIcon component. You can also declear type like this: keyof typeof dynamicIconImports