From 613cac84d03d27dbf459771687ff3ea6a21e6b7c Mon Sep 17 00:00:00 2001 From: Eric Fennis Date: Wed, 19 Mar 2025 11:38:26 +0100 Subject: [PATCH] Add support for alias classnames in lucide-solid --- packages/lucide-solid/package.json | 1 + .../lucide-solid/scripts/exportTemplate.mjs | 5 ++- packages/lucide-solid/src/Icon.tsx | 5 ++- .../__snapshots__/lucide-solid.spec.tsx.snap | 8 ++-- .../lucide-solid/tests/lucide-solid.spec.tsx | 44 ++++++++++--------- 5 files changed, 35 insertions(+), 28 deletions(-) diff --git a/packages/lucide-solid/package.json b/packages/lucide-solid/package.json index bb7480104..c4d7dfac3 100644 --- a/packages/lucide-solid/package.json +++ b/packages/lucide-solid/package.json @@ -66,6 +66,7 @@ "build:bundle": "rollup -c rollup.config.mjs", "build:icons": "build-icons --output=./src --templateSrc=./scripts/exportTemplate.mjs --renderUniqueKey --withAliases --separateAliasesFile --aliasesFileExtension=.ts --iconFileExtension=.tsx --exportFileName=index.ts", "test": "pnpm build:icons && vitest run", + "test:update": "vitest run -u", "version": "pnpm version --git-tag-version=false" }, "devDependencies": { diff --git a/packages/lucide-solid/scripts/exportTemplate.mjs b/packages/lucide-solid/scripts/exportTemplate.mjs index 116b257b5..35b4e7cd6 100644 --- a/packages/lucide-solid/scripts/exportTemplate.mjs +++ b/packages/lucide-solid/scripts/exportTemplate.mjs @@ -8,6 +8,7 @@ export default async ({ getSvg, deprecated, deprecationReason, + iconNameAliases, }) => { const svgContents = await getSvg(); const svgBase64 = base64SVG(svgContents); @@ -30,7 +31,9 @@ const iconNode: IconNode = ${JSON.stringify(children)}; * ${deprecated ? `@deprecated ${deprecationReason}` : ''} */ const ${componentName} = (props: LucideProps) => ( - + ) export default ${componentName}; diff --git a/packages/lucide-solid/src/Icon.tsx b/packages/lucide-solid/src/Icon.tsx index d805f72ca..08794813f 100644 --- a/packages/lucide-solid/src/Icon.tsx +++ b/packages/lucide-solid/src/Icon.tsx @@ -2,11 +2,12 @@ import { For, splitProps } from 'solid-js'; import { Dynamic } from 'solid-js/web'; import defaultAttributes from './defaultAttributes'; import { IconNode, LucideProps } from './types'; -import { mergeClasses, toKebabCase } from '@lucide/shared'; +import { mergeClasses, toKebabCase, createLucideClassNames } from '@lucide/shared'; interface IconProps { name?: string; iconNode: IconNode; + aliasNames?: string[]; } const Icon = (props: LucideProps & IconProps) => { @@ -19,6 +20,7 @@ const Icon = (props: LucideProps & IconProps) => { 'name', 'iconNode', 'absoluteStrokeWidth', + 'aliasNames' ]); return ( @@ -37,6 +39,7 @@ const Icon = (props: LucideProps & IconProps) => { 'lucide', 'lucide-icon', localProps.name != null ? `lucide-${toKebabCase(localProps?.name)}` : undefined, + localProps.aliasNames != null ? createLucideClassNames(localProps.aliasNames) : undefined, localProps.class != null ? localProps.class : '', )} {...rest} diff --git a/packages/lucide-solid/tests/__snapshots__/lucide-solid.spec.tsx.snap b/packages/lucide-solid/tests/__snapshots__/lucide-solid.spec.tsx.snap index 47ba999bf..0308a81ae 100644 --- a/packages/lucide-solid/tests/__snapshots__/lucide-solid.spec.tsx.snap +++ b/packages/lucide-solid/tests/__snapshots__/lucide-solid.spec.tsx.snap @@ -10,8 +10,7 @@ exports[`Using lucide icon components > should adjust the size, stroke color and height="48" stroke="red" stroke-width="4" - class="lucide lucide-icon lucide-grid3x3" - data-testid="grid-icon" + class="lucide lucide-icon lucide-grid3x3 lucide-grid lucide-grid-3-x-3" > should not scale the strokeWidth when ab height="48" stroke="red" stroke-width="1" - class="lucide lucide-icon lucide-grid3x3" - data-testid="grid-icon" + class="lucide lucide-icon lucide-grid3x3 lucide-grid lucide-grid-3-x-3" > should render a component 1`] = ` height="24" stroke="currentColor" stroke-width="2" - class="lucide lucide-icon lucide-grid3x3" + class="lucide lucide-icon lucide-grid3x3 lucide-grid lucide-grid-3-x-3" > { }); it('should adjust the size, stroke color and stroke width', async () => { - const testId = 'grid-icon'; const { container, getByTestId } = render(() => ( )); - const { attributes } = (await getByTestId(testId)) as unknown as { - attributes: Record; - }; - expect(attributes.stroke.value).toBe('red'); - expect(attributes.width.value).toBe('48'); - expect(attributes.height.value).toBe('48'); - expect(attributes['stroke-width'].value).toBe('4'); + const gridIcon = container.firstChild as SVGElement; + + expect(gridIcon).toHaveAttribute('width', '48'); + expect(gridIcon).toHaveAttribute('height', '48'); + expect(gridIcon).toHaveAttribute('stroke', 'red'); + expect(gridIcon).toHaveAttribute('stroke-width', '4'); + expect(container.innerHTML).toMatchSnapshot(); }); it('should render the alias icon', () => { - const testId = 'pen-icon'; const { container } = render(() => ( { const { container: Edit2Container } = render(() => ( { 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 testId = 'grid-icon'; const { container, getByTestId } = render(() => ( )); - const { attributes } = getByTestId(testId) as unknown as { - attributes: Record; - }; - expect(attributes.stroke.value).toBe('red'); - expect(attributes.width.value).toBe('48'); - expect(attributes.height.value).toBe('48'); - expect(attributes['stroke-width'].value).toBe('1'); + const gridIcon = container.firstChild as SVGElement; + + expect(gridIcon).toHaveAttribute('stroke-width', '1'); + expect(gridIcon).toHaveAttribute('width', '48'); + expect(gridIcon).toHaveAttribute('height', '48'); + expect(gridIcon).toHaveAttribute('stroke', 'red'); expect(container.innerHTML).toMatchSnapshot(); });