From 4edcf24fc9b225da3395de9fe9e5c3d12a428d11 Mon Sep 17 00:00:00 2001
From: Eric Fennis <eric.fennis@gmail.com>
Date: Wed, 19 Mar 2025 10:58:24 +0100
Subject: [PATCH] Support aliased class names in lucide-react

---
 packages/lucide-react/package.json                     |  1 +
 packages/lucide-react/scripts/exportTemplate.mjs       |  4 +++-
 packages/lucide-react/src/createLucideIcon.ts          |  6 ++++--
 .../tests/__snapshots__/lucide-react.spec.tsx.snap     |  6 +++---
 packages/lucide-react/tests/lucide-react.spec.tsx      | 10 ++++++++++
 5 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/packages/lucide-react/package.json b/packages/lucide-react/package.json
index 03c8cd270..730a1938c 100644
--- a/packages/lucide-react/package.json
+++ b/packages/lucide-react/package.json
@@ -47,6 +47,7 @@
     "typecheck": "tsc",
     "typecheck:watch": "tsc -w",
     "test": "pnpm build:icons && vitest run",
+    "test:update": "vitest run -u",
     "test:watch": "vitest watch",
     "version": "pnpm version --git-tag-version=false"
   },
diff --git a/packages/lucide-react/scripts/exportTemplate.mjs b/packages/lucide-react/scripts/exportTemplate.mjs
index e39cf0a6f..fe63d6e15 100644
--- a/packages/lucide-react/scripts/exportTemplate.mjs
+++ b/packages/lucide-react/scripts/exportTemplate.mjs
@@ -8,10 +8,12 @@ export default async ({
   getSvg,
   deprecated,
   deprecationReason,
+  iconNameAliases,
 }) => {
   const svgContents = await getSvg();
   const svgBase64 = base64SVG(svgContents);
 
+
   return `
 import createLucideIcon from '../createLucideIcon';
 import { IconNode } from '../types';
@@ -29,7 +31,7 @@ export const __iconNode: IconNode = ${JSON.stringify(children)}
  * @returns {JSX.Element} JSX Element
  * ${deprecated ? `@deprecated ${deprecationReason}` : ''}
  */
-const ${componentName} = createLucideIcon('${componentName}', __iconNode);
+const ${componentName} = createLucideIcon('${componentName}', __iconNode${iconNameAliases != null ? `, ${JSON.stringify(iconNameAliases)}` : ''});
 
 export default ${componentName};
 `;
diff --git a/packages/lucide-react/src/createLucideIcon.ts b/packages/lucide-react/src/createLucideIcon.ts
index b20929382..2d3d39c90 100644
--- a/packages/lucide-react/src/createLucideIcon.ts
+++ b/packages/lucide-react/src/createLucideIcon.ts
@@ -9,12 +9,14 @@ import Icon from './Icon';
  * @param {array} iconNode
  * @returns {ForwardRefExoticComponent} LucideIcon
  */
-const createLucideIcon = (iconName: string, iconNode: IconNode) => {
+const createLucideIcon = (iconName: string, iconNode: IconNode, aliasNames?: string[]) => {
+  const aliasClassNames = aliasNames != null ? aliasNames.map((aliasName) => `lucide-${toKebabCase(aliasName)}`).join(' ') : '';
+
   const Component = forwardRef<SVGSVGElement, LucideProps>(({ className, ...props }, ref) =>
     createElement(Icon, {
       ref,
       iconNode,
-      className: mergeClasses(`lucide-${toKebabCase(iconName)}`, className),
+      className: mergeClasses(`lucide-${toKebabCase(iconName)}`,aliasClassNames, className),
       ...props,
     }),
   );
diff --git a/packages/lucide-react/tests/__snapshots__/lucide-react.spec.tsx.snap b/packages/lucide-react/tests/__snapshots__/lucide-react.spec.tsx.snap
index a3cc08657..37a4bd4f6 100644
--- a/packages/lucide-react/tests/__snapshots__/lucide-react.spec.tsx.snap
+++ b/packages/lucide-react/tests/__snapshots__/lucide-react.spec.tsx.snap
@@ -10,7 +10,7 @@ exports[`Using lucide icon components > should adjust the size, stroke color and
      stroke-width="4"
      stroke-linecap="round"
      stroke-linejoin="round"
-     class="lucide lucide-grid3x3"
+     class="lucide lucide-grid3x3 lucide-grid lucide-grid-3-x-3"
 >
   <rect width="18"
         height="18"
@@ -40,7 +40,7 @@ exports[`Using lucide icon components > should not scale the strokeWidth when ab
      stroke-width="1"
      stroke-linecap="round"
      stroke-linejoin="round"
-     class="lucide lucide-grid3x3"
+     class="lucide lucide-grid3x3 lucide-grid lucide-grid-3-x-3"
 >
   <rect width="18"
         height="18"
@@ -70,7 +70,7 @@ exports[`Using lucide icon components > should render an component 1`] = `
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
-     class="lucide lucide-grid3x3"
+     class="lucide lucide-grid3x3 lucide-grid lucide-grid-3-x-3"
 >
   <rect width="18"
         height="18"
diff --git a/packages/lucide-react/tests/lucide-react.spec.tsx b/packages/lucide-react/tests/lucide-react.spec.tsx
index 8365d96f4..fc71c43b1 100644
--- a/packages/lucide-react/tests/lucide-react.spec.tsx
+++ b/packages/lucide-react/tests/lucide-react.spec.tsx
@@ -69,6 +69,16 @@ 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 { container, getByTestId } = render(
       <Grid