src/lib/components/DataInput/TextInput.stories.svelte

@@ -1,6 +1,7 @@
 <script module lang="ts">
 	import { defineMeta } from '@storybook/addon-svelte-csf';
 	import TextInput from './TextInput.svelte';
+	import { User } from 'lucide-svelte';
 
 	const { Story } = defineMeta({
 		title: 'Data Input/Text Input',
@@ -45,10 +46,18 @@
 	});
 </script>
 
-{#snippet icon()}
-	<i class="fi fi-rr-user"></i>
-{/snippet}
-
 <Story name="Text Label" args={{ color: 'primary', name: 'text', start: 'Text' }} />
-<Story name="Icon Start" args={{ color: 'secondary', name: 'text', start: icon }} />
+<Story name="Icon Start">
-<Story name="Icon End" args={{ color: 'secondary', name: 'text', end: icon }} />
+	<TextInput name="text" color="secondary">
+		{#snippet start()}
+			<User />
+		{/snippet}
+	</TextInput>
+</Story>
+<Story name="Icon End">
+	<TextInput name="text" color="secondary">
+		{#snippet end()}
+			<User />
+		{/snippet}
+	</TextInput>
+</Story>

src/lib/components/Feedback/Alert.stories.svelte

@@ -1,8 +1,8 @@
 <script module lang="ts">
 	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import Alert from './Alert.svelte';
+	import { Info } from 'lucide-svelte';
 	import type { ComponentProps } from 'svelte';
-	import { InfoIcon } from '../Icons';
+	import Alert from './Alert.svelte';
 
 	const { Story } = defineMeta({
 		title: 'Feedback/Alert',
@@ -16,7 +16,7 @@
 {#snippet template(props: ComponentProps<typeof Alert>)}
 	<Alert {...props}>
 		{#snippet icon()}
-			<InfoIcon class="h-6 w-6 shrink-0 stroke-info" />
+			<Info />
 		{/snippet}
 		<span>Hello world!</span>
 	</Alert>

src/lib/components/Icons/InfoIcon.svelte

@@ -1,8 +0,0 @@
-<script lang="ts">
-	import type { SvelteHTMLElements } from 'svelte/elements';
-	import { twMerge } from 'tailwind-merge';
-
-	let { class: className, ...props }: SvelteHTMLElements['i'] = $props();
-</script>
-
-<i {...props} class={twMerge(className, 'fi fi-sr-info')}></i>

src/lib/components/Icons/index.ts

@@ -1 +0,0 @@
-export { default as InfoIcon } from './InfoIcon.svelte';