lucide-svelte is publishing with SvelteComponentTyped

[gdagosto]

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.309.0

Browser

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

Operating system

• Windows
• Linux
• macOS
• Other/not relevant

Description

Even tho #1517 replaces SvelteComponentTyped with SvelteComponent, version 0.309.0 still shows the following

/**
 * @license lucide-svelte v0.309.0 - ISC

This source code is licensed under the ISC license.
See the LICENSE file in the root directory of this source tree.
 */

import { SvelteComponentTyped } from "svelte";
import type { IconProps } from '../types.js';
declare const __propDef: {
    props: IconProps;
    events: {
        [evt: string]: CustomEvent<any>;
    };
    slots: {
        default: {};
    };
};
export type FilePenLineProps = typeof __propDef.props;
export type FilePenLineEvents = typeof __propDef.events;
export type FilePenLineSlots = typeof __propDef.slots;
/**
 * @component @name FilePenLine
 * @description Lucide SVG icon component, renders SVG Element with children.
 *
 * @preview ![img](data:image/svg+xml;base64,PHN2ZyAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogIHdpZHRoPSIyNCIKICBoZWlnaHQ9IjI0IgogIHZpZXdCb3g9IjAgMCAyNCAyNCIKICBmaWxsPSJub25lIgogIHN0cm9rZT0iIzAwMCIgc3R5bGU9ImJhY2tncm91bmQtY29sb3I6ICNmZmY7IGJvcmRlci1yYWRpdXM6IDJweCIKICBzdHJva2Utd2lkdGg9IjIiCiAgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIgogIHN0cm9rZS1saW5lam9pbj0icm91bmQiCj4KICA8cGF0aCBkPSJNMjAgMTkuNXYuNWEyIDIgMCAwIDEtMiAySDZhMiAyIDAgMCAxLTItMlY0YTIgMiAwIDAgMSAyLTJoOC41TDE4IDUuNSIgLz4KICA8cGF0aCBkPSJNOCAxOGgxIiAvPgogIDxwYXRoIGQ9Ik0xOC40IDkuNmEyIDIgMCAwIDEgMyAzTDE3IDE3bC00IDEgMS00WiIgLz4KPC9zdmc+Cg==) - https://lucide.dev/icons/file-pen-line
 * @see https://lucide.dev/guide/packages/lucide-svelte - Documentation
 *
 * @param {Object} props - Lucide icons props and any valid SVG attribute
 * @returns {FunctionalComponent} Vue component
 *
 */
export default class FilePenLine extends SvelteComponentTyped<FilePenLineProps, FilePenLineEvents, FilePenLineSlots> {
}
export {};

SvelteComponentTyped is deprecated. This leads to problems when trying to use generic icons, such as the following:

<script lang="ts">
	
	import type { SvelteComponent } from 'svelte';
	import FilePenLine from 'lucide-svelte/icons/file-pen-line';

	/* Types of construct signatures are incompatible.
        Type 'new (options: ComponentConstructorOptions<IconProps>) => FilePenLine' is not assignable to type 'new <Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any>(options: ComponentConstructorOptions<Props>) => SvelteComponent<...>'.
        Construct signature return types 'FilePenLine' and 'SvelteComponent<Props, Events, Slots>' are incompatible.
        The types of '$$prop_def' are incompatible between these types.
        Type 'IconProps' is not assignable to type 'Props'.
        'IconProps' is assignable to the constraint of type 'Props', but 'Props' could be instantiated with a different subtype of constraint 'Record<string, any>'.  */
	const icon: typeof SvelteComponent = FilePenLine;
          
</script>


<svelte:component this={icon}/>

This is happening even for newer icons, such as list-collapse

Steps to reproduce

Install the latest version of lucide-svelte

Add the following code to App.svelte

<script lang="ts">
  import type { SvelteComponent } from 'svelte';
  import FilePenLine from 'lucide-svelte/icons/file-pen-line';
  
  const icon: typeof SvelteComponent = FilePenLine; // Should be an error on this line
</script>


<svelte:component this={icon}/>

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

[AdrianGonz97]

SvelteComponentTyped is inserted during the package build time by @sveltejs/package. Despite being deprecated, @sveltejs/package continues to use SvelteComponentTyped for the sake of compatibility for Svelte 3. It'll probably be removed completely in Svelte 5: sveltejs/svelte#8512 (comment)

---

As demonstrated in the Svelte PR that introduced the change: sveltejs/svelte#8512

You need to either add any as a type argument:

<script lang="ts">
  import type { SvelteComponent } from 'svelte';
  import FilePenLine from 'lucide-svelte/icons/file-pen-line';
  
  const icon: typeof SvelteComponent<any> = FilePenLine;
</script>


<svelte:component this={icon}/>

or use the ComponentType helper with the provided Icon type instead:

<script lang="ts">
	import type { ComponentType } from "svelte";
	import type { Icon } from "lucide-svelte";
	import FilePenLine from "lucide-svelte/icons/file-pen-line";

  const icon: ComponentType<Icon> = FilePenLine; 
</script>

<svelte:component this={icon} />

[gdagosto]

Thanks Adrian, it works!

I still don't understand why exactly SvelteComponentTyped is inserted by @sveltejs/package. Before submitting this PR, I checked an internal icon library I use, and built it with svelte 4 and @sveltejs/package@2.2.1. Despite what you just showed me, it doesn't generate SvelteComponentTyped for compatibility. Instead, it generates the following:

import { SvelteComponent } from "svelte";
// [...]
export type ActivityProps = typeof __propDef.props;
export type ActivityEvents = typeof __propDef.events;
export type ActivitySlots = typeof __propDef.slots;
export default class Activity extends SvelteComponent<ActivityProps, ActivityEvents, ActivitySlots> {
}
export {};

Strange, isn't it?

[AdrianGonz97]

Ahh, that might be because your icon library probably defines the peerDependency for Svelte as v4 and above in your package.json. lucide-svelte has it defined to support both v3 and v4:

lucide/packages/lucide-svelte/package.json

Line 74 in e56b09d

"svelte": ">=3 <5"

[gdagosto]

That explains it all. Thanks again Adrian!