svelte: update for runes mode

.prettierignore

@@ -19,5 +19,4 @@ packages/lucide-static/icon-nodes.json
 packages/lucide-static/font
 
 # lucide-svelte
-packages/lucide-svelte/src/icons/*.svelte
 packages/lucide-svelte/.svelte-kit

categories/charts.json

@@ -1,5 +1,5 @@
 {
   "$schema": "../category.schema.json",
   "title": "Charts",
-  "icon": "pie-chart"
+  "icon": "chart-pie"
 }

docs/guide/packages/lucide-svelte.md

@@ -200,10 +200,10 @@ The example below imports all ES Modules, so exercise caution when using it. Imp
 ```svelte
 <script>
   import * as icons from 'lucide-svelte';
-  export let name;
+  const { name, ...props } = $props();
 </script>
 
-<svelte:component this="{icons[name]}" {...$$props} />
+<svelte:component this="{icons[name]}" {...props} />
 ```
 
 #### Using the Icon Component

package.json

@@ -28,12 +28,12 @@
     "generate:nextJSAliases": "node ./scripts/generateNextJSAliases.mjs",
     "postinstall": "husky install",
     "lint:es": "eslint .",
-    "lint:format": "prettier \"**/*.{js,mjs,ts,jsx,tsx,html,css,scss,json,yml,yaml}\" --check",
+    "lint:format": "pnpm exec prettier \"**/*.{js,mjs,ts,jsx,tsx,html,css,scss,json,yml,yaml,svelte}\" --plugin prettier-plugin-svelte --check",
     "lint:json:icons": "ajv --spec=draft2020 -s icon.schema.json -d 'icons/*.json' > /dev/null",
     "lint:json:categories": "ajv --spec=draft2020 -s category.schema.json -d 'categories/*.json' > /dev/null",
     "lint:json": "pnpm run lint:json:icons && pnpm run lint:json:categories",
     "lint": "pnpm lint:es && pnpm lint:format && pnpm lint:json",
-    "format": "prettier \"**/*.{js,mjs,ts,jsx,tsx,html,css,scss,json,yml,yaml}\" --write",
+    "format": "pnpm exec prettier \"**/*.{js,mjs,ts,jsx,tsx,html,css,scss,json,yml,yaml,svelte}\" --plugin prettier-plugin-svelte --write",
     "prepare": "husky install",
     "gi": "node ./scripts/generate/generateIcons.mjs",
     "rename": "node scripts/rename/renameIcon.mjs",
@@ -60,6 +60,7 @@
     "minimist": "^1.2.8",
     "p-memoize": "^7.1.1",
     "prettier": "3.2.4",
+    "prettier-plugin-svelte": "^3.2.6",
     "semver": "^7.5.4",
     "simple-git": "^3.25.0",
     "svgo": "^3.1.0",

packages/lucide-svelte/package.json

@@ -58,16 +58,16 @@
   "devDependencies": {
     "@lucide/build-icons": "workspace:*",
     "@lucide/helpers": "workspace:*",
-    "@sveltejs/package": "^2.2.3",
-    "@sveltejs/vite-plugin-svelte": "^2.4.2",
+    "@sveltejs/package": "^2.3.4",
+    "@sveltejs/vite-plugin-svelte": "^3.1.1",
     "@testing-library/jest-dom": "^6.1.4",
-    "@testing-library/svelte": "^4.0.2",
-    "@tsconfig/svelte": "^5.0.0",
+    "@testing-library/svelte": "^5.2.1",
+    "@tsconfig/svelte": "^5.0.4",
     "jest-serializer-html": "^7.1.0",
     "jsdom": "^20.0.3",
-    "svelte": "^4.0.1",
-    "svelte-check": "^3.4.4",
-    "svelte-preprocess": "^5.0.4",
+    "svelte": "5.0.0-next.222",
+    "svelte-check": "^3.8.5",
+    "svelte-preprocess": "^6.0.2",
     "typescript": "^5.1.6",
     "vite": "5.0.13",
     "vitest": "^1.1.1"

packages/lucide-svelte/scripts/exportTemplate.mjs

@@ -12,7 +12,7 @@ ${getJSBanner()}
 import Icon from '../Icon.svelte';
 import type { IconNode, IconProps } from '../types.js';
 
-type $$Props = IconProps;
+const props: IconProps = $props();
 
 const iconNode: IconNode = ${JSON.stringify(children)};
 
@@ -29,7 +29,7 @@ const iconNode: IconNode = ${JSON.stringify(children)};
  */
 </script>
 
-<Icon name="${iconName}" {...$$props} iconNode={iconNode}>
+<Icon name="${iconName}" {...props} iconNode={iconNode}>
   <slot/>
 </Icon>
 `;

packages/lucide-svelte/src/Icon.svelte

@@ -1,45 +1,51 @@
 <script lang="ts">
-  import defaultAttributes from './defaultAttributes'
+  import defaultAttributes from './defaultAttributes';
   import type { IconNode } from './types';
+  import type { SvelteHTMLElements } from 'svelte/elements';
 
-  export let name: string | undefined = undefined
-  export let color = 'currentColor'
-  export let size: number | string = 24
-  export let strokeWidth: number | string = 2
-  export let absoluteStrokeWidth: boolean = false
-  export let iconNode: IconNode = []
+  const {
+    class: className,
+    children,
 
-  const mergeClasses = <ClassType = string | undefined | null>(
-    ...classes: ClassType[]
-  ) => classes.filter((className, index, array) => {
-      return Boolean(className) && array.indexOf(className) === index;
-    })
-    .join(' ');
+    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}
-  {...$$restProps}
+  {...props}
   width={size}
   height={size}
   stroke={color}
-  stroke-width={
-    absoluteStrokeWidth
-      ? Number(strokeWidth) * 24 / Number(size)
-      : strokeWidth
-  }
-  class={
-    mergeClasses(
-      'lucide-icon',
-      'lucide',
-      name ? `lucide-${name}`: '',
-      $$props.class
-    )
-  }
+  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}/>
+    <svelte:element
+      this={tag}
+      {...attrs}
+    />
   {/each}
-  <slot />
+  {@render children?.()}
 </svg>

packages/lucide-svelte/tests/TestSlots.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import Smile from '../src/icons/smile.svelte'
+  import Smile from '../src/icons/smile.svelte';
 </script>
 
 <Smile>