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

Add support for icon alias classnames in lucide-svelte

Browse Source
This commit is contained in:
Eric Fennis
2025-03-21 11:18:03 +01:00
parent c42676b0fd
commit 35afa59c99
4 changed files with 20 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
packages/lucide-solid/tests/lucide-solid.spec.tsx
View File

@@ -53,14 +53,14 @@ describe('Using lucide icon components', () => {
}); });
it('should render the alias icon name classNames', () => { it('should render the alias icon name classNames', () => {
const { container } = render(() => ( const { container } = render(() => (
<Pen /> <Pen />
)); ));
const PenIcon = container.firstChild; const PenIcon = container.firstChild;
expect(PenIcon).toHaveClass('lucide-edit-2'); expect(PenIcon).toHaveClass('lucide-edit-2');
}) })
it('should not scale the strokeWidth when absoluteStrokeWidth is set', () => { it('should not scale the strokeWidth when absoluteStrokeWidth is set', () => {
const { container, getByTestId } = render(() => ( const { container, getByTestId } = render(() => (

5
packages/lucide-svelte/scripts/exportTemplate.mjs
View File

@@ -9,6 +9,7 @@ export default async ({
getSvg, getSvg,
deprecated, deprecated,
deprecationReason, deprecationReason,
iconNameAliases
}) => { }) => {
const svgContents = await getSvg(); const svgContents = await getSvg();
const svgBase64 = base64SVG(svgContents); const svgBase64 = base64SVG(svgContents);
@@ -36,7 +37,9 @@ const iconNode: IconNode = ${JSON.stringify(children)};
*/ */
</script> </script>
<Icon name="${iconName}" {...$$props} iconNode={iconNode}> <Icon name="${iconName}" {...$$props} iconNode={iconNode}${
iconNameAliases != null ? ` aliasNames={${JSON.stringify(iconNameAliases)}}` : ''
}>
<slot/> <slot/>
</Icon> </Icon>
`; `;

2
packages/lucide-svelte/src/Icon.svelte
View File

@@ -8,6 +8,7 @@
export let strokeWidth: number | string = 2 export let strokeWidth: number | string = 2
export let absoluteStrokeWidth: boolean = false export let absoluteStrokeWidth: boolean = false
export let iconNode: IconNode = [] export let iconNode: IconNode = []
export let aliasNames: string[] = []
const mergeClasses = <ClassType = string | undefined | null>( const mergeClasses = <ClassType = string | undefined | null>(
...classes: ClassType[] ...classes: ClassType[]
@@ -34,6 +35,7 @@
'lucide-icon', 'lucide-icon',
'lucide', 'lucide',
name ? `lucide-${name}`: '', name ? `lucide-${name}`: '',
...aliasNames.map(alias => `lucide-${alias}`),
$$props.class $$props.class
) )
} }

8
packages/lucide-svelte/tests/lucide-svelte.spec.ts
View File

@@ -70,6 +70,14 @@ describe('Using lucide icon components', () => {
expect(PenIconRenderedHTML).toBe(Edit2Container.innerHTML); 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', () => { it('should not scale the strokeWidth when absoluteStrokeWidth is set', () => {
const testId = 'smile-icon'; const testId = 'smile-icon';
const { container, getByTestId } = render(Smile, { const { container, getByTestId } = render(Smile, {