Svelte 5 runes mode compatibility

[HummingMind]

Package

• lucide
• lucide-angular
• lucide-flutter
• lucide-preact
• lucide-react
• lucide-react-native
• lucide-solid
• lucide-svelte
• lucide-vue
• lucide-vue-next
• Figma plugin
• all JS packages
• site

Description

A .next version of lucide-svelte is needed that adds compatibility with runes mode for Svelte 5 RC (and soon Svelte 5 final).
The current version does not work, as it uses $$props instead of the new $porps() rune.

Thank you!

Use cases

Needed for Svelte 5 RC support of runes mode

Checklist

• I have searched the existing issues to make sure this bug has not already been reported.

[ericfennis]

@HummingMind But lucide-svelte should work with Svelte 5. But still uses the old syntax. We can't just switch to the new syntax yet, because we have to deal with backward compatibility.

[HummingMind]

@ericfennis understandable. It would need to be a new major version, which is why I suggested a ".next" version. Could be published side-by-side with the current version. 🍺

If it is not time yet, I get it. 👍🏻

[Shyrogan]

Moving towards Svelte 5 would also be a great option to implement some features, see #1302 for example.

If you need someone to write the code for it, I would love to do it. Just want to make sure those changes would be merged if someone writes the code for it.

[alissa-tung]

some like

<script lang="ts">
  import defaultAttributes from './defaultAttributes';
  import type { IconNode } from './types';
  import type { SvelteHTMLElements } from 'svelte/elements';

  const {
    class: className,
    children,

    name = undefined,
    color = 'currentColor',
    size = 24,
    strokeWidth = 2,
    absoluteStrokeWidth = false,
    iconNode = [],

    ...props
  }: SvelteHTMLElements['svg'] & {
    name: string | undefined;
    color: string;
    size: number | string;
    strokeWidth: number | string;
    absoluteStrokeWidth: boolean;
    iconNode: IconNode;
  } = $props();

  const mergeClasses = <ClassType = string | undefined | null,>(...classes: ClassType[]) =>
    classes
      .filter((className, index, array) => {
        return Boolean(className) && array.indexOf(className) === index;
      })
      .join(' ');
</script>

<svg
  {...defaultAttributes}
  {...props}
  width={size}
  height={size}
  stroke={color}
  stroke-width={absoluteStrokeWidth ? (Number(strokeWidth) * 24) / Number(size) : strokeWidth}
  class={mergeClasses('lucide-icon', 'lucide', name ? `lucide-${name}` : '', className)}
>
  {#each iconNode as [tag, attrs]}
    <svelte:element
      this={tag}
      {...attrs}
    />
  {/each}
  {@render children?.()}
</svg>

should work

[alissa-tung]

https://github.com/lucide-icons/lucide/pull/2380/files

[Shyrogan]

https://github.com/lucide-icons/lucide/pull/2380/files

Should fix what I mentioned. Thank you @alissa-tung, I don't see any improvements to make, let's hope it gets merged :)

[alissa-tung]

https://github.com/lucide-icons/lucide/pull/2380/files

Should fix what I mentioned. Thank you @alissa-tung, I don't see any improvements to make, let's hope it gets merged :)

I think that would be great, but since I am new to JavaScript, I think I can not even handle my own pull request. I opened it hope someone can notice that there should happen something for Svelte 5 version, and if someone can take over this PR I thing would be much helpful

[bobvork]

Please note that svelte:component has been deprecated as of 5.0.0-next.217: https://github.com/sveltejs/svelte/releases/tag/svelte%405.0.0-next.217. It should work for now, but might be worth looking into the new syntax, as found in the preview docs here: https://svelte-5-preview.vercel.app/docs/breaking-changes#breaking-changes-in-runes-mode-svelte-component-is-no-longer-necessary

[kirso]

Also type compatibility:

import type { Component } from 'svelte';
import { Globe, Map, CheckCircle, FileText, Clock, Users, Search } from 'lucide-svelte';
import type { Icon } from 'lucide-svelte';
export const Icons: Component<Icon> = {
	Globe,
	Map,
	CheckCircle,
	FileText,
	Clock,
	Users,
	Search
};

export { Globe, Map, CheckCircle, FileText, Clock, Users, Search };

Throws:
Object literal may only specify known properties, and 'Globe' does not exist in type 'Component<Icon, {}, string>'.ts(2353)

[cowboycodr]

#2312 (comment)
Typing seems to be the biggest issue currently.