Add support for icon alias classnames in lucide-svelte

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>
 `;

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
     )
   }

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, {