What is the type of a lucide-svelte icon?

[shyakadavis]

Hi. Anyone mind telling me what the type of a lucide-svelte icon is?

Example:

// what is the type here?
type TRoute = {
	name: string;
	path: string;
	icon: ??;
};

// if I want to use it like so
export const routes: TRoute[] = [
    {
        name: "Home",
        path: "/",
        icon: Home
    },
    ...
]

Also, on the other end, I'm iterating as so, for example. Is there a better way that you're away of?

{#each routes as route}
...
	<svelte:component this={route.icon} class="w-4 h-4" />
...
{/each}

[ericfennis]

Sorry for your the late reply, just see this.
It is Icon.

Import it from the library

import { type Icon } from 'lucide-svelte'

[shyakadavis]

Hi, @ericfennis

I actually tried that, but got this error:

Type 'typeof Home' is missing the following properties from type 'SvelteComponent<IconProps, IconEvents, {}>': $$prop_def, $$events_def, $$slot_def, $capture_state, and 6 more.ts(2740)
site.ts(8, 9): Did you mean to use 'new' with this expression?

Any recommendation(s)?

[lolcabanon]

Hey!

I was successful with this code with lucide-svelte v0.294.0 :

/**
* @type {import('svelte').ComponentType<import('lucide-svelte').Icon>?}
*/
export let icon = null;

But then with v0.302.0 I got the following error :

Namespace '".../node_modules/.pnpm/lucide-svelte@0.302.0_svelte@4.2.8/node_modules/lucide-svelte/dist/lucide-svelte"' has no exported member 'Icon'.js(2694)

How can I type a prop so it will allow passing an icon like this with type safety :

+page.svelte :

<script>
import { User } from 'lucide-svelte';
</script>

<Component icon={User} />

Component.svelte :

<script>
/**
* @type {import('svelte').ComponentType<import('lucide-svelte').Icon>?}
*/
export let icon = null;
</script>

<svelte:component this={icon} />

NB. This is just a simple example, but I have a more complex component which use this logic. It used to work before. I haven't tested all versions between 294 and 302.

[shyakadavis]

Hi.

Since I'm not using JSDoc, do you have a clue how I could do it under TS?

I tried,

import type { Icon } from 'lucide-svelte';

but got these errors:

"lucide-svelte" has no exported member named Icon . Did you mean XIcon ?

&

Cannot use namespace Icon as a type.

---

I had settled for doing this:

export type Route = {
	name: string;
	icon: typeof CalendarClock;
	href: string;
};

but it would be nice knowing what the actual type of an icon is; any new recommendation @ericfennis

[ericfennis]

We had this type exported, but I think something broke with the new build flow. 🤔

[lolcabanon]

Ok so the Icon type should still be exported?

[lolcabanon]

@shyakadavis if I got that right you should be able to do this then (when the type will be exported again in a fix release?) :

import { type ComponentType } from 'svelte';
import { type Icon } from 'lucide-svelte'; 

type TRoute = {
	name: string;
	path: string;
	icon: ComponentType<Icon>;
};

Your issue was probably with how svelte handle component prop types, you have to wrap it in a ComponentType<>.

I'll just let @ericfennis confirm that the Icon type should still be exported.

[shyakadavis]

Hey, @lolcabanon

You're right. Let me wait for the fix; hopefully it should answer this.

@ericfennis for convenience, I opened an issue here: #1761

[AdrianGonz97]

@shyakadavis Oops! Looks like the Icon type was previously being generated during the build, so I missed it. Here's the fix: #1762

[shyakadavis]

@AdrianGonz97 Thanks a lot. Looking forward to it.
Might I also say, Adrian, you're a legend 🙇🏽. Love your work for the Svelte community.

[GusMartins499]

Hi guys, can anyone help me?

"svelte": "^4.2.7"
"tslib": "^2.4.1"
"typescript": "^5.0.0"
"vite": "^5.0.3"
"@sveltejs/kit": "^2.0.0"
"lucide-svelte": "^0.378.0"

Type 'typeof LayoutDashboard' is not assignable to type 'ComponentType<Icon>'. Types of construct signatures are incompatible. Type 'new (options: ComponentConstructorOptions<IconProps>) => LayoutDashboard' is not assignable to type 'new (options: ComponentConstructorOptions<{ [x: string]: any; name?: string | undefined; color?: string | undefined; size?: string | number | undefined; strokeWidth?: string | number | undefined; absoluteStrokeWidth?: boolean | undefined; iconNode: IconNode; mergeClasses?: (<ClassType = string>(...classes: ClassType[]) => string) | undefined; }>) => Icon'. Property 'mergeClasses' is missing in type 'SvelteComponentTyped<IconProps, { [evt: string]: CustomEvent<any>; }, { default: {}; }>' but required in type 'Icon'.ts(2322) Icon.svelte.d.ts(31, 9): 'mergeClasses' is declared here. menu-items.ts(7, 2): The expected type comes from property 'icon' which is declared here on type 'MenuItem'