use icons

src/lib/components/Icons/IconSearch.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	export let classNames = '';
+</script>
+
+<svg
+	class={classNames}
+	xmlns="http://www.w3.org/2000/svg"
+	xmlns:xlink="http://www.w3.org/1999/xlink"
+	aria-hidden="true"
+	focusable="false"
+	role="img"
+	width="1em"
+	height="1em"
+	preserveAspectRatio="xMidYMid meet"
+	viewBox="0 0 32 32"
+>
+	<path
+		d="M30 28.59L22.45 21A11 11 0 1 0 21 22.45L28.59 30zM5 14a9 9 0 1 1 9 9a9 9 0 0 1-9-9z"
+		fill="currentColor"
+	/>
+</svg>

src/lib/components/Icons/IconStar.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	export let classNames = '';
+</script>
+
+<svg
+	class={classNames}
+	xmlns="http://www.w3.org/2000/svg"
+	xmlns:xlink="http://www.w3.org/1999/xlink"
+	aria-hidden="true"
+	fill="none"
+	focusable="false"
+	role="img"
+	width="1em"
+	height="1em"
+	preserveAspectRatio="xMidYMid meet"
+	viewBox="0 0 32 32"
+>
+	<path
+		d="M16 6.52l2.76 5.58l.46 1l1 .15l6.16.89l-4.38 4.3l-.75.73l.18 1l1.05 6.13l-5.51-2.89L16 23l-.93.49l-5.51 2.85l1-6.13l.18-1l-.74-.77l-4.42-4.35l6.16-.89l1-.15l.46-1L16 6.52M16 2l-4.55 9.22l-10.17 1.47l7.36 7.18L6.9 30l9.1-4.78L25.1 30l-1.74-10.13l7.36-7.17l-10.17-1.48z"
+		fill="currentColor"
+	/>
+</svg>

src/lib/components/InferencePlayground/InferencePlaygroundModelPickerModal.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
 	import type { ModelEntryWithTokenizer } from '$lib/types';
 	import { createEventDispatcher } from 'svelte';
+	import IconSearch from '../Icons/IconSearch.svelte';
+	import IconStar from '../Icons/IconStar.svelte';
 
 	export let models: ModelEntryWithTokenizer[];
 
@@ -38,21 +40,7 @@
 			class="flex h-full w-full flex-col overflow-hidden rounded-lg border bg-white text-gray-900 shadow-md"
 		>
 			<div class="flex items-center border-b px-3">
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="mr-2 text-sm"
-					width="1em"
-					height="1em"
-					viewBox="0 0 24 24"
-					fill="none"
-					stroke="currentColor"
-					stroke-width="2"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-				>
-					<circle cx="11" cy="11" r="8"></circle>
-					<path d="m21 21-4.3-4.3"></path>
-				</svg>
+				<IconSearch classNames="mr-2 text-sm" />
 				<input
 					autofocus
 					class="flex h-10 w-full rounded-md bg-transparent py-3 text-sm placeholder-gray-400 outline-none"
@@ -65,42 +53,14 @@
 					<div class="px-2 py-1.5 text-xs font-medium text-gray-500">Trending</div>
 					<div>
 						<div class="flex cursor-pointer items-center px-2 py-1.5 text-sm hover:bg-gray-100">
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								width="24"
-								height="24"
-								viewBox="0 0 24 24"
-								fill="none"
-								stroke="currentColor"
-								stroke-width="2"
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								class="lucide lucide-star mr-2 h-4 w-4 text-yellow-400"
-								><polygon
-									points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
-								></polygon></svg
-							>
+							<IconStar classNames="lucide lucide-star mr-2 h-4 w-4 text-yellow-400" />
 							<span class="inline-flex items-center"
 								><span class="text-gray-500">meta-llama</span><span class="mx-1 text-black">/</span
 								><span class="text-black">Meta-Llama-3-70B-Instruct</span></span
 							>
 						</div>
 						<div class="flex cursor-pointer items-center px-2 py-1.5 text-sm hover:bg-gray-100">
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								width="24"
-								height="24"
-								viewBox="0 0 24 24"
-								fill="none"
-								stroke="currentColor"
-								stroke-width="2"
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								class="lucide lucide-star mr-2 h-4 w-4 text-yellow-400"
-								><polygon
-									points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
-								></polygon></svg
-							>
+							<IconStar classNames="lucide lucide-star mr-2 h-4 w-4 text-yellow-400" />
 							<span class="inline-flex items-center"
 								><span class="text-gray-500">mistralai</span><span class="mx-1 text-black">/</span
 								><span class="text-black">Mixtral-8x7B-Instruct-v0.1</span></span