From 35afa59c9997d273f2e0758f54256d485684ca2c Mon Sep 17 00:00:00 2001
From: Eric Fennis <eric.fennis@gmail.com>
Date: Fri, 21 Mar 2025 11:18:03 +0100
Subject: [PATCH] Add support for icon alias classnames in lucide-svelte

---
 packages/lucide-solid/tests/lucide-solid.spec.tsx  | 12 ++++++------
 packages/lucide-svelte/scripts/exportTemplate.mjs  |  5 ++++-
 packages/lucide-svelte/src/Icon.svelte             |  2 ++
 packages/lucide-svelte/tests/lucide-svelte.spec.ts |  8 ++++++++
 4 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/packages/lucide-solid/tests/lucide-solid.spec.tsx b/packages/lucide-solid/tests/lucide-solid.spec.tsx
index e3baf258b..fc1478b22 100644
--- a/packages/lucide-solid/tests/lucide-solid.spec.tsx
+++ b/packages/lucide-solid/tests/lucide-solid.spec.tsx
@@ -53,14 +53,14 @@ describe('Using lucide icon components', () => {
   });
 
   it('should render the alias icon name classNames', () => {
-      const { container } = render(() => (
-        <Pen />
-      ));
+    const { container } = render(() => (
+      <Pen />
+    ));
 
-      const PenIcon = container.firstChild;
+    const PenIcon = container.firstChild;
 
-      expect(PenIcon).toHaveClass('lucide-edit-2');
-    })
+    expect(PenIcon).toHaveClass('lucide-edit-2');
+  })
 
   it('should not scale the strokeWidth when absoluteStrokeWidth is set', () => {
     const { container, getByTestId } = render(() => (
diff --git a/packages/lucide-svelte/scripts/exportTemplate.mjs b/packages/lucide-svelte/scripts/exportTemplate.mjs
index acab05731..47b068ccd 100644
--- a/packages/lucide-svelte/scripts/exportTemplate.mjs
+++ b/packages/lucide-svelte/scripts/exportTemplate.mjs
@@ -9,6 +9,7 @@ export default async ({
   getSvg,
   deprecated,
   deprecationReason,
+  iconNameAliases
 }) => {
   const svgContents = await getSvg();
   const svgBase64 = base64SVG(svgContents);
@@ -36,7 +37,9 @@ const iconNode: IconNode = ${JSON.stringify(children)};
  */
 </script>
 
-<Icon name="${iconName}" {...$$props} iconNode={iconNode}>
+<Icon name="${iconName}" {...$$props} iconNode={iconNode}${
+    iconNameAliases != null ? ` aliasNames={${JSON.stringify(iconNameAliases)}}` : ''
+}>
   <slot/>
 </Icon>
 `;
diff --git a/packages/lucide-svelte/src/Icon.svelte b/packages/lucide-svelte/src/Icon.svelte
index 76f3e1f29..9c3867c5e 100644
--- a/packages/lucide-svelte/src/Icon.svelte
+++ b/packages/lucide-svelte/src/Icon.svelte
@@ -8,6 +8,7 @@
   export let strokeWidth: number | string = 2
   export let absoluteStrokeWidth: boolean = false
   export let iconNode: IconNode = []
+  export let aliasNames: string[] = []
 
   const mergeClasses = <ClassType = string | undefined | null>(
     ...classes: ClassType[]
@@ -34,6 +35,7 @@
       'lucide-icon',
       'lucide',
       name ? `lucide-${name}`: '',
+      ...aliasNames.map(alias => `lucide-${alias}`),
       $$props.class
     )
   }
diff --git a/packages/lucide-svelte/tests/lucide-svelte.spec.ts b/packages/lucide-svelte/tests/lucide-svelte.spec.ts
index 643d3e153..45823acec 100644
--- a/packages/lucide-svelte/tests/lucide-svelte.spec.ts
+++ b/packages/lucide-svelte/tests/lucide-svelte.spec.ts
@@ -70,6 +70,14 @@ describe('Using lucide icon components', () => {
     expect(PenIconRenderedHTML).toBe(Edit2Container.innerHTML);
   });
 
+  it('should render the alias icon name classNames', () => {
+    const { container } = render(Pen);
+
+    const PenIcon = container.firstChild;
+
+    expect(PenIcon).toHaveClass('lucide-edit-2');
+  })
+
   it('should not scale the strokeWidth when absoluteStrokeWidth is set', () => {
     const testId = 'smile-icon';
     const { container, getByTestId } = render(Smile, {