package.json

@@ -67,7 +67,6 @@
 	"dependencies": {
 		"@clerk/backend": "1.21.4",
 		"@clerk/themes": "^2.2.3",
-		"@flaticon/flaticon-uicons": "^3.3.1",
 		"@inlang/paraglide-sveltekit": "^0.15.0",
 		"@pothos/core": "^4.3.0",
 		"@pothos/plugin-prisma": "^4.4.0",
@@ -78,6 +77,7 @@
 		"eslint_d": "^14.3.0",
 		"graphql": "^16.9.0",
 		"graphql-yoga": "^5.10.4",
+		"lucide-svelte": "^0.469.0",
 		"pino": "^9.5.0",
 		"pino-pretty": "^13.0.0",
 		"tailwind-merge": "^2.5.5",

src/app.css

@@ -1,7 +1,6 @@
 @import 'tailwindcss/base';
 @import 'tailwindcss/components';
 @import 'tailwindcss/utilities';
-@import '@flaticon/flaticon-uicons/css/all/all';
 
 :root {
 	@apply text-base-content;

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';