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