search

lucide-icons / lucide

Beautiful & consistent icon toolkit made by the community. Open-source project and a fork of Feather Icons.
https://lucide.dev
ISC License
10.32k stars 467 forks source link

Svelte 5 runes mode compatibility #2312

Open HummingMind opened 2 months ago

HummingMind commented 2 months ago

Package

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

ericfennis commented 1 month ago

@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 commented 1 month ago

@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 commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

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

Shyrogan commented 4 weeks ago

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 commented 3 weeks ago

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 commented 3 weeks ago

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