Support aliased class names in lucide-react

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"
   },

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

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

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"

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