Mirrors/lucide
1
0
Fork 0
mirror of https://github.com/lucide-icons/lucide.git synced 2025-12-16 11:57:43 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix(packages): consistent icon name class (#2878)

Browse Source 
* fix: consistent icon name class

* merge classes

* fix vue-next

* update test snapshots

* fix vue-next

* fix test

* fix solid

* proper deduplication

* update snapshots

* preact

* refactor

* deprecated

* refactor tests

---------

Co-authored-by: Eric Fennis <eric.fennis@gmail.com>
This commit is contained in:
Dante Issaias
2025-03-21 10:35:54 +00:00
committed by GitHub
parent 6d6aa4c4cc
commit 4835ae67a9
16 changed files with 190 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/lucide-preact/scripts/exportTemplate.mjs
View File

@@ -26,7 +26,7 @@ import createLucideIcon from '../createLucideIcon';
* @returns {JSX.Element} JSX Element
* ${deprecated ? `@deprecated ${deprecationReason}` : ''}
*/
const ${componentName} = createLucideIcon('${componentName}', ${JSON.stringify(children)});
const ${componentName} = createLucideIcon('${iconName}', ${JSON.stringify(children)});
export default ${componentName};
`;

5
packages/lucide-preact/src/createLucideIcon.ts
View File

@@ -1,5 +1,5 @@
import { h, type JSX } from 'preact';
import { mergeClasses, toKebabCase } from '@lucide/shared';
import { mergeClasses, toKebabCase, toPascalCase } from '@lucide/shared';
import Icon from './Icon';
import type { IconNode, LucideIcon, LucideProps } from './types';
@@ -17,6 +17,7 @@ const createLucideIcon = (iconName: string, iconNode: IconNode): LucideIcon => {
...props,
iconNode,
class: mergeClasses<string | JSX.SignalLike<string | undefined>>(
`lucide-${toKebabCase(toPascalCase(iconName))}`,
`lucide-${toKebabCase(iconName)}`,
classes,
),
@@ -24,7 +25,7 @@ const createLucideIcon = (iconName: string, iconNode: IconNode): LucideIcon => {
children,
);
Component.displayName = `${iconName}`;
Component.displayName = toPascalCase(iconName);
return Component;
};

56
packages/lucide-preact/tests/__snapshots__/createLucideIcon.spec.tsx.snap
View File

@@ -27,3 +27,59 @@ exports[`Using createLucideIcon > should create a component from an iconNode 1`]
/>
</svg>
`;
exports[`Using createLucideIcon > should create a component from an iconNode with iconName 1`] = `
<svg
class="lucide lucide-air-vent"
fill="none"
height="24"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6 12H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"
/>
<path
d="M6 8h12"
/>
<path
d="M18.3 17.7a2.5 2.5 0 0 1-3.16 3.83 2.53 2.53 0 0 1-1.14-2V12"
/>
<path
d="M6.6 15.6A2 2 0 1 0 10 17v-5"
/>
</svg>
`;
exports[`Using createLucideIcon > should include backwards compatible className 1`] = `
<svg
class="lucide lucide-layout2 lucide-layout-2"
fill="none"
height="24"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6 12H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"
/>
<path
d="M6 8h12"
/>
<path
d="M18.3 17.7a2.5 2.5 0 0 1-3.16 3.83 2.53 2.53 0 0 1-1.14-2V12"
/>
<path
d="M6.6 15.6A2 2 0 1 0 10 17v-5"
/>
</svg>
`;

6
packages/lucide-preact/tests/__snapshots__/lucide-preact.spec.tsx.snap
View File

@@ -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-3x3"
>
<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-3x3"
>
<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-3x3"
>
<rect width="18"
height="18"

18
packages/lucide-preact/tests/createLucideIcon.spec.tsx
View File

@@ -12,4 +12,22 @@ describe('Using createLucideIcon', () => {
expect(container.firstChild).toMatchSnapshot();
expect(container.firstChild).toBeDefined();
});
it('should create a component from an iconNode with iconName', () => {
const AirVent = createLucideIcon('air-vent', airVent);
const { container } = render(<AirVent />);
expect(container.firstChild).toMatchSnapshot();
expect(container.firstChild).toBeDefined();
});
it('should include backwards compatible className', () => {
const Layout2 = createLucideIcon('layout-2', airVent);
const { container } = render(<Layout2 />);
expect(container.firstChild).toMatchSnapshot();
expect(container.firstChild).toBeDefined();
});
});