Refactor Icons

src/lib/components/Icons/IconCaret.svelte

@@ -0,0 +1,19 @@
+<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"
+	role="img"
+	width="1em"
+	height="1em"
+	preserveAspectRatio="xMidYMid meet"
+	viewBox="0 0 24 24"
+	><path
+		d="M16.293 9.293L12 13.586L7.707 9.293l-1.414 1.414L12 16.414l5.707-5.707z"
+		fill="currentColor"
+	/>
+</svg>

src/lib/components/Icons/IconCode.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"
+	style="transform: rotate(360deg);"
+>
+	<path d="M31 16l-7 7l-1.41-1.41L28.17 16l-5.58-5.59L24 9l7 7z" fill="currentColor" />
+	<path d="M1 16l7-7l1.41 1.41L3.83 16l5.58 5.59L8 23l-7-7z" fill="currentColor" />
+	<path d="M12.419 25.484L17.639 6l1.932.518L14.35 26z" fill="currentColor" />
+</svg>

src/lib/components/Icons/IconCross.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="1.1em"
+	height="1.1em"
+	preserveAspectRatio="xMidYMid meet"
+	viewBox="0 0 32 32"
+>
+	<path
+		d="M24 9.4L22.6 8L16 14.6L9.4 8L8 9.4l6.6 6.6L8 22.6L9.4 24l6.6-6.6l6.6 6.6l1.4-1.4l-6.6-6.6L24 9.4z"
+		fill="currentColor"
+	/>
+</svg>

src/lib/components/Icons/IconDelete.svelte

@@ -0,0 +1,24 @@
+<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="M12 12h2v12h-2z" fill="currentColor" /><path
+		d="M18 12h2v12h-2z"
+		fill="currentColor"
+	/><path
+		d="M4 6v2h2v20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8h2V6zm4 22V8h16v20z"
+		fill="currentColor"
+	/><path d="M12 2h8v2h-8z" fill="currentColor" />
+</svg>

src/lib/components/Icons/IconPlus.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	export let classNames = '';
+</script>
+
+<svg
+	class={classNames}
+	xmlns="http://www.w3.org/2000/svg"
+	width="1em"
+	height="1em"
+	viewBox="0 0 32 32"
+	><path
+		fill="currentColor"
+		d="M16 2A14.172 14.172 0 0 0 2 16a14.172 14.172 0 0 0 14 14a14.172 14.172 0 0 0 14-14A14.172 14.172 0 0 0 16 2Zm8 15h-7v7h-2v-7H8v-2h7V8h2v7h7Z"
+	/><path fill="none" d="M24 17h-7v7h-2v-7H8v-2h7V8h2v7h7v2z" /></svg
+>

src/lib/components/Icons/IconShare.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	export let classNames = '';
+</script>
+
+<svg
+	class={classNames}
+	width="1em"
+	height="1em"
+	viewBox="0 0 24 25"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<path
+		fill-rule="evenodd"
+		clip-rule="evenodd"
+		d="M5.41 9.41L4 8L12 0L20 8L18.59 9.41L13 3.83L13 17.5H11L11 3.83L5.41 9.41ZM22 17.5V23H2V17.5H0V23C0 23.5304 0.210714 24.0391 0.585786 24.4142C0.960859 24.7893 1.46957 25 2 25H22C22.5304 25 23.0391 24.7893 23.4142 24.4142C23.7893 24.0391 24 23.5304 24 23V17.5H22Z"
+		fill="currentColor"
+	/>
+</svg>

src/lib/components/InferencePlayground/InferencePlayground.svelte

@@ -13,6 +13,10 @@
 	import { type ChatCompletionInputMessage } from '@huggingface/tasks';
 	import type { ModelEntryWithTokenizer } from '$lib/types';
 	import { defaultGenerationConfig } from './generationConfigSettings';
+	import IconShare from '../Icons/IconShare.svelte';
+	import IconDelete from '../Icons/IconDelete.svelte';
+	import IconCode from '../Icons/IconCode.svelte';
+	import IconCaret from '../Icons/IconCaret.svelte';
 
 	export let models: ModelEntryWithTokenizer[];
 
@@ -268,20 +272,7 @@
 				<div
 					class="flex size-5 items-center justify-center rounded border border-black/5 bg-black/5 text-xs"
 				>
-					<svg
-						width="1em"
-						height="1em"
-						viewBox="0 0 24 25"
-						fill="none"
-						xmlns="http://www.w3.org/2000/svg"
-					>
-						<path
-							fill-rule="evenodd"
-							clip-rule="evenodd"
-							d="M5.41 9.41L4 8L12 0L20 8L18.59 9.41L13 3.83L13 17.5H11L11 3.83L5.41 9.41ZM22 17.5V23H2V17.5H0V23C0 23.5304 0.210714 24.0391 0.585786 24.4142C0.960859 24.7893 1.46957 25 2 25H22C22.5304 25 23.0391 24.7893 23.4142 24.4142C23.7893 24.0391 24 23.5304 24 23V17.5H22Z"
-							fill="currentColor"
-						/>
-					</svg>
+					<IconShare />
 				</div>
 
 				Share</button
@@ -291,13 +282,9 @@
 				type="button"
 				on:click={reset}
 				class="flex size-[39px] flex-none items-center justify-center rounded-lg border border-gray-200 bg-white text-sm font-medium text-gray-900 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:outline-none focus:ring-4 focus:ring-gray-100 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-700"
-				><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"
-					><path fill="currentColor" d="M12 12h2v12h-2zm6 0h2v12h-2z" /><path
-						fill="currentColor"
-						d="M4 6v2h2v20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8h2V6zm4 22V8h16v20zm4-26h8v2h-8z"
-					/></svg
-				></button
 			>
+				<IconDelete />
+			</button>
 			<div class="flex-1 items-center justify-center text-center text-sm text-gray-500">
 				<span class="max-xl:hidden">0 tokens · Latency {latency}ms</span>
 			</div>
@@ -306,17 +293,7 @@
 				on:click={() => (viewCode = !viewCode)}
 				class="flex h-[39px] items-center gap-2 rounded-lg border border-gray-200 bg-white px-3 py-2.5 text-sm font-medium text-gray-900 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:outline-none focus:ring-4 focus:ring-gray-100 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-700"
 			>
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					width="1em"
-					height="1em"
-					class="text-base"
-					viewBox="0 0 32 32"
-					><path
-						fill="currentColor"
-						d="m31 16l-7 7l-1.41-1.41L28.17 16l-5.58-5.59L24 9l7 7zM1 16l7-7l1.41 1.41L3.83 16l5.58 5.59L8 23l-7-7zm11.42 9.484L17.64 6l1.932.517L14.352 26z"
-					/></svg
-				>
+				<IconCode />
 				{!viewCode ? 'View Code' : 'Hide Code'}</button
 			>
 			<button
@@ -367,21 +344,7 @@
 					class="group relative -mt-4 flex h-[26px] w-full items-center justify-center gap-2 rounded-lg bg-black px-5 text-sm text-white hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:border-gray-700 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-gray-700"
 				>
 					Compare with...
-					<svg
-						class="ml-0.5 flex-none opacity-50 group-hover:opacity-100"
-						xmlns="http://www.w3.org/2000/svg"
-						xmlns:xlink="http://www.w3.org/1999/xlink"
-						aria-hidden="true"
-						role="img"
-						width="1em"
-						height="1em"
-						preserveAspectRatio="xMidYMid meet"
-						viewBox="0 0 24 24"
-						><path
-							d="M16.293 9.293L12 13.586L7.707 9.293l-1.414 1.414L12 16.414l5.707-5.707z"
-							fill="currentColor"
-						></path></svg
-					>
+					<IconCaret classNames="opacity-70" />
 					<select
 						class="absolute inset-0 border-none bg-white text-base opacity-0 outline-none"
 						on:change|preventDefault={(e) => {

src/lib/components/InferencePlayground/InferencePlaygroundConversation.svelte

@@ -3,6 +3,7 @@
 	import CodeSnippets from './InferencePlaygroundCodeSnippets.svelte';
 	import Message from './InferencePlaygroundMessage.svelte';
 	import PlaygroundOptions from './InferencePlaygroundGenerationConfig.svelte';
+	import IconPlus from '../Icons/IconPlus.svelte';
 
 	export let loading;
 	export let conversation;
@@ -90,17 +91,7 @@
 			disabled={loading}
 		>
 			<div class="flex items-center gap-2 !p-0 text-sm font-semibold">
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					width="1em"
-					height="1em"
-					viewBox="0 0 32 32"
-					class="text-lg"
-					><path
-						fill="currentColor"
-						d="M16 2A14.172 14.172 0 0 0 2 16a14.172 14.172 0 0 0 14 14a14.172 14.172 0 0 0 14-14A14.172 14.172 0 0 0 16 2Zm8 15h-7v7h-2v-7H8v-2h7V8h2v7h7Z"
-					/><path fill="none" d="M24 17h-7v7h-2v-7H8v-2h7V8h2v7h7v2z" /></svg
-				>Add message
+				<IconPlus classNames="text-lg" /> Add message
 			</div>
 		</button>
 	{:else}

src/lib/components/InferencePlayground/InferencePlaygroundHFTokenModal.svelte

@@ -2,6 +2,7 @@
 <script lang="ts">
 	import { createEventDispatcher, onDestroy, onMount } from 'svelte';
 	import { browser } from '$app/environment';
+	import IconCross from '../Icons/IconCross.svelte';
 
 	let backdropEl: HTMLDivElement;
 	let modalEl: HTMLDivElement;
@@ -70,21 +71,7 @@
 					on:click={() => dispatch('close')}
 					class="ms-auto inline-flex h-8 w-8 items-center justify-center rounded-lg bg-transparent text-sm text-gray-400 hover:bg-gray-200 hover:text-gray-900 dark:hover:bg-gray-600 dark:hover:text-white"
 				>
-					<svg
-						class="size-3"
-						aria-hidden="true"
-						xmlns="http://www.w3.org/2000/svg"
-						fill="none"
-						viewBox="0 0 14 14"
-					>
-						<path
-							stroke="currentColor"
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"
-						/>
-					</svg>
+					<IconCross classNames="text-xl" />
 					<span class="sr-only">Close modal</span>
 				</button>
 			</div>