42 lines
995 B
Svelte
42 lines
995 B
Svelte
|
<!--
|
||
|
|
Component: MockIcon
|
||
|
|
Wrapper component for Lucide icons to properly handle className in Storybook.
|
||
|
|
|
||
|
|
Lucide Svelte icons from @lucide/svelte/icons/* don't properly handle
|
||
|
|
the className prop directly. This wrapper ensures the class is applied
|
||
|
|
correctly via the HTML element's class attribute.
|
||
|
|
-->
|
||
|
|
<script lang="ts">
|
||
|
|
import { cn } from '$shared/shadcn/utils/shadcn-utils';
|
||
|
|
import type {
|
||
|
|
Component,
|
||
|
|
Snippet,
|
||
|
|
} from 'svelte';
|
||
|
|
|
||
|
|
interface Props {
|
||
|
|
/**
|
||
|
|
* The Lucide icon component
|
||
|
|
*/
|
||
|
|
icon: Component;
|
||
|
|
/**
|
||
|
|
* CSS classes to apply to the icon
|
||
|
|
*/
|
||
|
|
class?: string;
|
||
|
|
/**
|
||
|
|
* Additional icon-specific attributes
|
||
|
|
*/
|
||
|
|
attrs?: Record<string, unknown>;
|
||
|
|
}
|
||
|
|
|
||
|
|
let { icon: Icon, class: className, attrs = {} }: Props = $props();
|
||
|
|
</script>
|
||
|
|
|
||
|
|
{#if Icon}
|
||
|
|
{@const __iconClass__ = cn('size-4', className)}
|
||
|
|
<!-- Render icon component dynamically with class prop -->
|
||
|
|
<Icon
|
||
|
|
class={__iconClass__}
|
||
|
|
{...attrs}
|
||
|
|
/>
|
||
|
|
{/if}
|