Package

• lucide
• lucide-angular
• lucide-flutter
• lucide-preact
• lucide-react
• lucide-react-native
• lucide-solid
• lucide-svelte
• lucide-vue
• lucide-vue-next
• Figma plugin
• source/main
• other/not relevant

Version

0.376.0

Can you reproduce this in the latest version?

• Yes
• No

Browser

• Chrome/Chromium
• Firefox
• Safari
• Edge
• iOS Safari
• Opera
• Other/not relevant

Operating system

• Windows
• Linux
• macOS
• ChromeOS
• iOS
• Android
• Other/not relevant

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:

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.

1. Create a new Svelte project using Typescript:

   npm create svelte@latest myapp
   cd myapp
   npm install
   npm run dev
   

2. Install lucide-svelte: npm install lucide-svelte
3. 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}
   

4. Run svelte-check against the project: npm run check
5. 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

• 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.)