Enable Svelte component

lucide-icons · Mar 22, 2024 · 34e647d · 34e647d
1 parent 6a9bd80
commit 34e647d
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 6 deletions.
diff --git a/packages/lucide-svelte/package.json b/packages/lucide-svelte/package.json
@@ -52,10 +52,12 @@
     "build:package": "svelte-package --input ./src",
     "build:license": "node ./scripts/appendBlockComments.mjs",
     "test": "vitest run",
+    "test:watch": "vitest watch",
     "version": "pnpm version --git-tag-version=false"
   },
   "devDependencies": {
     "@lucide/build-icons": "workspace:*",
+    "@lucide/shared": "workspace:*",
     "@sveltejs/package": "^2.2.3",
     "@sveltejs/vite-plugin-svelte": "^2.4.2",
     "@testing-library/jest-dom": "^6.1.4",

diff --git a/packages/lucide-svelte/src/Icon.svelte b/packages/lucide-svelte/src/Icon.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
+  import { mergeClasses } from '@lucide/shared'
   import defaultAttributes from './defaultAttributes'
   import type { IconNode } from './types';
 
-  export let name: string
+  export let name: string | undefined
   export let color = 'currentColor'
   export let size: number | string = 24
   export let strokeWidth: number | string = 2
@@ -21,7 +22,14 @@
       ? Number(strokeWidth) * 24 / Number(size)
       : strokeWidth
   }
-  class={`lucide-icon lucide lucide-${name} ${$$props.class ?? ''}`}
+  class={
+    mergeClasses(
+      'lucide-icon',
+      'lucide',
+      name ? `lucide-${name}`: '',
+      $$props.class
+    )
+  }
 >
   {#each iconNode as [tag, attrs]}
     <svelte:element this={tag} {...attrs}/>

diff --git a/packages/lucide-svelte/tests/__snapshots__/lucide-svelte.spec.ts.snap b/packages/lucide-svelte/tests/__snapshots__/lucide-svelte.spec.ts.snap
@@ -45,7 +45,7 @@ exports[`Using lucide icon components > should adjust the size, stroke color and
 <body>
   <div>
     <svg
-      class="lucide-icon lucide lucide-smile "
+      class="lucide-icon lucide lucide-smile"
       fill="none"
       height="48"
       stroke="red"
@@ -98,7 +98,7 @@ exports[`Using lucide icon components > should not scale the strokeWidth when ab
        stroke-linecap="round"
        stroke-linejoin="round"
        data-testid="smile-icon"
-       class="lucide-icon lucide lucide-smile "
+       class="lucide-icon lucide lucide-smile"
   >
     <circle cx="12"
             cy="12"
@@ -127,7 +127,7 @@ exports[`Using lucide icon components > should render an component 1`] = `
 <body>
   <div>
     <svg
-      class="lucide-icon lucide lucide-smile "
+      class="lucide-icon lucide lucide-smile"
       fill="none"
       height="24"
       stroke="currentColor"
@@ -172,7 +172,7 @@ exports[`Using lucide icon components > should render an icon slot 1`] = `
 <body>
   <div>
     <svg
-      class="lucide-icon lucide lucide-smile "
+      class="lucide-icon lucide lucide-smile"
       fill="none"
       height="24"
       stroke="currentColor"