From cf48dbb2d33de9aabdd91bcaa15a8d493a4c7073 Mon Sep 17 00:00:00 2001 From: Eric Fennis Date: Wed, 19 Mar 2025 11:14:07 +0100 Subject: [PATCH] Add support for preact --- packages/lucide-preact/package.json | 1 + .../lucide-preact/scripts/exportTemplate.mjs | 5 ++++- packages/lucide-preact/src/createLucideIcon.ts | 11 ++++++++--- .../__snapshots__/lucide-preact.spec.tsx.snap | 6 +++--- .../lucide-preact/tests/lucide-preact.spec.tsx | 10 ++++++++++ .../lucide-react/scripts/exportTemplate.mjs | 5 +++-- packages/lucide-react/src/createLucideIcon.ts | 11 +++++++---- packages/shared/src/utils.ts | 17 +++++++++++++++++ 8 files changed, 53 insertions(+), 13 deletions(-) diff --git a/packages/lucide-preact/package.json b/packages/lucide-preact/package.json index 6cee519de..1b9487b79 100644 --- a/packages/lucide-preact/package.json +++ b/packages/lucide-preact/package.json @@ -39,6 +39,7 @@ "build:icons": "build-icons --output=./src --templateSrc=./scripts/exportTemplate.mjs --renderUniqueKey --withAliases --aliasesFileExtension=.ts --iconFileExtension=.ts --exportFileName=index.ts", "build:bundles": "rollup -c ./rollup.config.mjs", "test": "pnpm build:icons && vitest run", + "test:update": "vitest run -u", "version": "pnpm version --git-tag-version=false" }, "devDependencies": { diff --git a/packages/lucide-preact/scripts/exportTemplate.mjs b/packages/lucide-preact/scripts/exportTemplate.mjs index 42a9be1ff..ae84926d1 100644 --- a/packages/lucide-preact/scripts/exportTemplate.mjs +++ b/packages/lucide-preact/scripts/exportTemplate.mjs @@ -8,6 +8,7 @@ export default async ({ getSvg, deprecated, deprecationReason, + iconNameAliases, }) => { const svgContents = await getSvg(); const svgBase64 = base64SVG(svgContents); @@ -26,7 +27,9 @@ import createLucideIcon from '../createLucideIcon'; * @returns {JSX.Element} JSX Element * ${deprecated ? `@deprecated ${deprecationReason}` : ''} */ -const ${componentName} = createLucideIcon('${componentName}', ${JSON.stringify(children)}); +const ${componentName} = createLucideIcon('${componentName}', ${JSON.stringify(children)}${ + iconNameAliases != null ? `, ${JSON.stringify(iconNameAliases)}` : '' +}); export default ${componentName}; `; diff --git a/packages/lucide-preact/src/createLucideIcon.ts b/packages/lucide-preact/src/createLucideIcon.ts index 2ba13086f..8d5502615 100644 --- a/packages/lucide-preact/src/createLucideIcon.ts +++ b/packages/lucide-preact/src/createLucideIcon.ts @@ -1,5 +1,5 @@ import { h, type JSX } from 'preact'; -import { mergeClasses, toKebabCase } from '@lucide/shared'; +import { mergeClasses, createLucideClassNames } from '@lucide/shared'; import Icon from './Icon'; import type { IconNode, LucideIcon, LucideProps } from './types'; @@ -9,7 +9,12 @@ import type { IconNode, LucideIcon, LucideProps } from './types'; * @param {array} iconNode * @returns {FunctionComponent} LucideIcon */ -const createLucideIcon = (iconName: string, iconNode: IconNode): LucideIcon => { +const createLucideIcon = (iconName: string, iconNode: IconNode, aliasNames: string[] = []): LucideIcon => { + const lucideClassNames = createLucideClassNames([ + iconName, + ...aliasNames, + ]); + const Component = ({ class: classes = '', children, ...props }: LucideProps) => h( Icon, @@ -17,7 +22,7 @@ const createLucideIcon = (iconName: string, iconNode: IconNode): LucideIcon => { ...props, iconNode, class: mergeClasses>( - `lucide-${toKebabCase(iconName)}`, + lucideClassNames, classes, ), }, diff --git a/packages/lucide-preact/tests/__snapshots__/lucide-preact.spec.tsx.snap b/packages/lucide-preact/tests/__snapshots__/lucide-preact.spec.tsx.snap index a3cc08657..37a4bd4f6 100644 --- a/packages/lucide-preact/tests/__snapshots__/lucide-preact.spec.tsx.snap +++ b/packages/lucide-preact/tests/__snapshots__/lucide-preact.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" > 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" > 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" > { expect(PenIconRenderedHTML).toBe(Edit2Container.innerHTML); }); + it('should render the alias icon name classNames', () => { + const { container } = render( + , + ); + + const PenIcon = container.firstChild; + + expect(PenIcon).toHaveClass('lucide-edit-2'); + }) + it('should not scale the strokeWidth when absoluteStrokeWidth is set', () => { const { container } = render( { - const aliasClassNames = aliasNames != null ? aliasNames.map((aliasName) => `lucide-${toKebabCase(aliasName)}`).join(' ') : ''; +const createLucideIcon = (iconName: string, iconNode: IconNode, aliasNames: string[] = []) => { + const lucideClassNames = createLucideClassNames([ + iconName, + ...aliasNames, + ]); const Component = forwardRef(({ className, ...props }, ref) => createElement(Icon, { ref, iconNode, - className: mergeClasses(`lucide-${toKebabCase(iconName)}`,aliasClassNames, className), + className: mergeClasses(lucideClassNames, className), ...props, }), ); diff --git a/packages/shared/src/utils.ts b/packages/shared/src/utils.ts index bb6fbe3df..10b1c0be2 100644 --- a/packages/shared/src/utils.ts +++ b/packages/shared/src/utils.ts @@ -49,3 +49,20 @@ export const mergeClasses = (...classes: }) .join(' ') .trim(); + +/** + * Create list of lucide icon names + * + * @param {array} classes + * @returns {string} A string of classes + */ +export const createLucideClassNames = (iconNames?: string[]) => { + if (iconNames == null) { + return ''; + } + + return iconNames + .map((aliasName) => `lucide-${toKebabCase(aliasName)}`) + .join(' ') + .trim(); +};