When using the latest version of lucide-svelte (0.376.0 and 0.376.1), using the pattern described on the Lucide website to pass icon components causes the following error in svelte-check:
Error: Type 'typeof Home' is not assignable to type 'ComponentType<Icon>'.
Types of construct signatures are incompatible.
Type 'new (options: ComponentConstructorOptions<IconProps>) => Home' 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)
href: '/',
icon: Home,
},
Steps to reproduce
Follow the steps documented on the Lucide website to create a new project using the Svelte library, then copy the typescript example from the Types section and run svelte-check.
Create a new Svelte project using Typescript:
npm create svelte@latest myapp
cd myapp
npm install
npm run dev
Install lucide-svelte: npm install lucide-svelte
Open the default +page.svelte file and replace its contents with the example contents from the Types section on the Lucide website:
<script lang="ts">
import Home from 'lucide-svelte/icons/home';
import Library from 'lucide-svelte/icons/library';
import Cog from 'lucide-svelte/icons/cog';
import type { ComponentType } from 'svelte';
import type { Icon } from 'lucide-svelte';
type MenuItem = {
name: string;
href: string;
icon: ComponentType<Icon>;
}
const menuItems: MenuItem[] = [
{
name: 'Home',
href: '/',
icon: Home,
},
{
name: 'Blog',
href: '/blog',
icon: Library,
},
{
name: 'Projects',
href: '/projects',
icon: Cog,
}
];
</script>
{#each menuItems as item}
<a href={item.href}>
<svelte:component this={item.icon} />
<span>{item.name}</span>
</a>
{/each}
Run svelte-check against the project: npm run check
It should pass, but instead causes the following errors:
npm run check
> lucide-typescript-bug@0.0.1 check
> svelte-kit sync && svelte-check --tsconfig ./tsconfig.json
====================================
Loading svelte-check in workspace: s:\code\lucide-typescript-bug
Getting Svelte diagnostics...
s:\code\lucide-typescript-bug\src\routes\+page.svelte:18:4
Error: Type 'typeof Home' is not assignable to type 'ComponentType<Icon>'.
Types of construct signatures are incompatible.
Type 'new (options: ComponentConstructorOptions<IconProps>) => Home' 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)
href: '/',
icon: Home,
},
s:\code\lucide-typescript-bug\src\routes\+page.svelte:23:4
Error: Type 'typeof Library' is not assignable to type 'ComponentType<Icon>'.
Types of construct signatures are incompatible.
Type 'new (options: ComponentConstructorOptions<IconProps>) => Library' 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)
href: '/blog',
icon: Library,
},
s:\code\lucide-typescript-bug\src\routes\+page.svelte:28:4
Error: Type 'typeof Cog' is not assignable to type 'ComponentType<Icon>'.
Types of construct signatures are incompatible.
Type 'new (options: ComponentConstructorOptions<IconProps>) => Cog' 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)
href: '/projects',
icon: Cog,
}
s:\code\lucide-typescript-bug\src\routes\+page.svelte:35:4
Error: Property 'iconNode' is missing in type '{}' but required in type '{ [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; }'. (ts)
<a href={item.href}>
<svelte:component this={item.icon} />
<span>{item.name}</span>
====================================
svelte-check found 4 errors and 0 warnings in 1 file
Checklist
[X] I have searched if someone has submitted a similar issue before and there weren't any. (Please make sure to also search closed issues, as this issue might already have been resolved.)
Wizzel1
commented
2 weeks ago
Package
Version
0.376.0
Can you reproduce this in the latest version?
Browser
Operating system
Description
When using the latest version of lucide-svelte (0.376.0 and 0.376.1), using the pattern described on the Lucide website to pass icon components causes the following error in
svelte-check:Steps to reproduce
Follow the steps documented on the Lucide website to create a new project using the Svelte library, then copy the typescript example from the Types section and run svelte-check.
npm install lucide-svelteOpen the default
+page.sveltefile and replace its contents with the example contents from the Types section on the Lucide website:npm run checkIt should pass, but instead causes the following errors:
Checklist