42 lines
956 B
Svelte
42 lines
956 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 {
|
|
/**
|
|
* Lucide icon component
|
|
*/
|
|
icon: Component;
|
|
/**
|
|
* CSS classes
|
|
*/
|
|
class?: string;
|
|
/**
|
|
* Additional 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}
|