update icons

src/lib/components/Icons/IconCaret.svelte

@@ -1,16 +0,0 @@
-<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

@@ -1,21 +0,0 @@
-<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/IconCog.svelte

@@ -1,13 +0,0 @@
-<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="M27 16.76v-1.53l1.92-1.68A2 2 0 0 0 29.3 11l-2.36-4a2 2 0 0 0-1.73-1a2 2 0 0 0-.64.1l-2.43.82a11.35 11.35 0 0 0-1.31-.75l-.51-2.52a2 2 0 0 0-2-1.61h-4.68a2 2 0 0 0-2 1.61l-.51 2.52a11.48 11.48 0 0 0-1.32.75l-2.38-.86A2 2 0 0 0 6.79 6a2 2 0 0 0-1.73 1L2.7 11a2 2 0 0 0 .41 2.51L5 15.24v1.53l-1.89 1.68A2 2 0 0 0 2.7 21l2.36 4a2 2 0 0 0 1.73 1a2 2 0 0 0 .64-.1l2.43-.82a11.35 11.35 0 0 0 1.31.75l.51 2.52a2 2 0 0 0 2 1.61h4.72a2 2 0 0 0 2-1.61l.51-2.52a11.48 11.48 0 0 0 1.32-.75l2.42.82a2 2 0 0 0 .64.1a2 2 0 0 0 1.73-1l2.28-4a2 2 0 0 0-.41-2.51ZM25.21 24l-3.43-1.16a8.86 8.86 0 0 1-2.71 1.57L18.36 28h-4.72l-.71-3.55a9.36 9.36 0 0 1-2.7-1.57L6.79 24l-2.36-4l2.72-2.4a8.9 8.9 0 0 1 0-3.13L4.43 12l2.36-4l3.43 1.16a8.86 8.86 0 0 1 2.71-1.57L13.64 4h4.72l.71 3.55a9.36 9.36 0 0 1 2.7 1.57L25.21 8l2.36 4l-2.72 2.4a8.9 8.9 0 0 1 0 3.13L27.57 20Z"
-	/><path
-		fill="currentColor"
-		d="M16 22a6 6 0 1 1 6-6a5.94 5.94 0 0 1-6 6Zm0-10a3.91 3.91 0 0 0-4 4a3.91 3.91 0 0 0 4 4a3.91 3.91 0 0 0 4-4a3.91 3.91 0 0 0-4-4Z"
-	/></svg
->

src/lib/components/Icons/IconCompare.svelte

@@ -1,10 +0,0 @@
-<script lang="ts">
-	export let classNames = "";
-</script>
-
-<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32" class={classNames}
-	><path
-		fill="currentColor"
-		d="M28 6H18V4a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h10v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2ZM4 15h6.17l-2.58 2.59L9 19l5-5l-5-5l-1.41 1.41L10.17 13H4V4h12v20H4Zm12 13v-2a2 2 0 0 0 2-2V8h10v9h-6.17l2.58-2.59L23 13l-5 5l5 5l1.41-1.41L21.83 19H28v9Z"
-	/></svg
->

src/lib/components/Icons/IconCopyCode.svelte

@@ -1,24 +0,0 @@
-<script lang="ts">
-	export let classNames = "";
-</script>
-
-<svg
-	class={classNames}
-	xmlns="http://www.w3.org/2000/svg"
-	aria-hidden="true"
-	fill="currentColor"
-	focusable="false"
-	role="img"
-	width="0.9em"
-	height="0.9em"
-	preserveAspectRatio="xMidYMid meet"
-	viewBox="0 0 32 32"
-	><path
-		d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z"
-		transform="translate(0)"
-	></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z" transform="translate(0)"></path><rect
-		fill="none"
-		width="32"
-		height="32"
-	></rect></svg
->

src/lib/components/Icons/IconCross.svelte

@@ -1,21 +0,0 @@
-<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

@@ -1,21 +0,0 @@
-<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/IconInfo.svelte

@@ -1,20 +0,0 @@
-<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="M17 22v-8h-4v2h2v6h-3v2h8v-2h-3z" fill="currentColor" />
-	<path d="M16 8a1.5 1.5 0 1 0 1.5 1.5A1.5 1.5 0 0 0 16 8z" fill="currentColor" />
-	<path d="M16 30a14 14 0 1 1 14-14a14 14 0 0 1-14 14zm0-26a12 12 0 1 0 12 12A12 12 0 0 0 16 4z" fill="currentColor" />
-</svg>

src/lib/components/Icons/IconPlus.svelte

@@ -1,10 +0,0 @@
-<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/IconSearch.svelte

@@ -1,18 +0,0 @@
-<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

@@ -1,22 +0,0 @@
-<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/Icons/IconThrashcan.svelte

@@ -1,21 +0,0 @@
-<script lang="ts">
-	export let classNames = "";
-</script>
-
-<svg
-	class={classNames}
-	style=""
-	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 24 24"
-	><path
-		fill="currentColor"
-		d="M2.131 13.63a10 10 0 0 1 .001-3.26c1.101.026 2.092-.502 2.477-1.431c.385-.93.058-2.003-.74-2.763a10 10 0 0 1 2.306-2.307c.76.798 1.834 1.125 2.763.74c.93-.385 1.458-1.376 1.431-2.477a10 10 0 0 1 3.261 0c-.026 1.102.502 2.092 1.431 2.477c.93.385 2.003.058 2.763-.74a10 10 0 0 1 2.307 2.306c-.798.76-1.125 1.834-.74 2.764s1.376 1.458 2.477 1.43a10 10 0 0 1 0 3.262c-1.102-.027-2.092.501-2.477 1.43c-.385.93-.058 2.004.74 2.764a10 10 0 0 1-2.306 2.306c-.76-.798-1.834-1.125-2.764-.74s-1.458 1.376-1.43 2.478a10 10 0 0 1-3.262-.001c.027-1.101-.502-2.092-1.43-2.477c-.93-.385-2.004-.058-2.764.74a10 10 0 0 1-2.306-2.306c.798-.76 1.125-1.834.74-2.763c-.385-.93-1.376-1.458-2.478-1.431M12 15a3 3 0 1 0 0-6a3 3 0 0 0 0 6"
-	/></svg
->

src/lib/components/InferencePlayground/InferencePlayground.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { Conversation, ConversationMessage, ModelWithTokenizer, Session } from "$lib/types";
+	import type { Conversation, ConversationMessage, ModelWithTokenizer } from "$lib/types";
 
 	import {
 		handleNonStreamingResponse,
@@ -13,11 +13,11 @@
 	import { isMac } from "$lib/utils/platform";
 	import { HfInference } from "@huggingface/inference";
 	import { onDestroy } from "svelte";
-	import IconCode from "../Icons/IconCode.svelte";
-	import IconCompare from "../Icons/IconCompare.svelte";
-	import IconDelete from "../Icons/IconDelete.svelte";
-	import IconInfo from "../Icons/IconInfo.svelte";
-	import IconThrashcan from "../Icons/IconThrashcan.svelte";
+	import IconCode from "~icons/carbon/code";
+	import IconCompare from "~icons/carbon/compare";
+	import IconDelete from "~icons/carbon/trash-can";
+	import IconInfo from "~icons/carbon/information";
+	import IconThrashcan from "~icons/carbon/trash-can";
 	import PlaygroundConversation from "./InferencePlaygroundConversation.svelte";
 	import PlaygroundConversationHeader from "./InferencePlaygroundConversationHeader.svelte";
 	import GenerationConfig from "./InferencePlaygroundGenerationConfig.svelte";
@@ -299,7 +299,9 @@
 						on:click={() => (viewSettings = !viewSettings)}
 						class="flex h-[39px] items-center gap-1 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:ring-4 focus:ring-gray-100 focus:outline-hidden md:hidden 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"
 					>
-						<IconThrashcan classNames="text-black dark:text-white" />
+						<div class="text-black dark:text-white">
+							<IconThrashcan />
+						</div>
 						{!viewSettings ? "Settings" : "Hide Settings"}
 					</button>
 				{/if}
@@ -428,7 +430,9 @@
 		href="https://huggingface.co/docs/api-inference/tasks/chat-completion"
 		class="flex items-center gap-1 text-sm text-gray-500 underline decoration-gray-300 hover:text-gray-800 dark:text-gray-400 dark:decoration-gray-600 dark:hover:text-gray-200"
 	>
-		<IconInfo classNames="text-xs" />
+		<div class="text-xs">
+			<IconInfo />
+		</div>
 		View Docs
 	</a>
 	<span class="dark:text-gray-500">·</span>

src/lib/components/InferencePlayground/InferencePlaygroundConversation.svelte

@@ -5,7 +5,7 @@
 
 	import CodeSnippets from "./InferencePlaygroundCodeSnippets.svelte";
 	import Message from "./InferencePlaygroundMessage.svelte";
-	import IconPlus from "../Icons/IconPlus.svelte";
+	import IconPlus from "~icons/carbon/add";
 
 	export let conversation: Conversation;
 	export let loading: boolean;
@@ -96,7 +96,10 @@
 			disabled={loading}
 		>
 			<div class="flex items-center gap-2 p-0! text-sm font-semibold">
-				<IconPlus classNames="text-lg" /> Add message
+				<div class="text-lg">
+					<IconPlus />
+				</div>
+				 Add message
 			</div>
 		</button>
 	{:else}

src/lib/components/InferencePlayground/InferencePlaygroundConversationHeader.svelte

@@ -5,7 +5,7 @@
 
 	import { models } from "$lib/stores/models";
 	import Avatar from "../Avatar.svelte";
-	import IconCog from "../Icons/IconCog.svelte";
+	import IconCog from "~icons/carbon/settings";
 	import GenerationConfig from "./InferencePlaygroundGenerationConfig.svelte";
 	import ModelSelectorModal from "./InferencePlaygroundModelSelectorModal.svelte";
 	import InferencePlaygroundProviderSelect from "./InferencePlaygroundProviderSelect.svelte";

src/lib/components/InferencePlayground/InferencePlaygroundHFTokenModal.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { createEventDispatcher, onDestroy, onMount } from "svelte";
 
-	import IconCross from "../Icons/IconCross.svelte";
+	import IconCross from "~icons/carbon/close";
 
 	export let storeLocallyHfToken = false;
 
@@ -69,7 +69,9 @@
 					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"
 				>
-					<IconCross classNames="text-xl" />
+					<div class="text-xl">
+						<IconCross />
+					</div>
 					<span class="sr-only">Close modal</span>
 				</button>
 			</div>

src/lib/components/InferencePlayground/InferencePlaygroundModelSelector.svelte

@@ -3,7 +3,7 @@
 
 	import { models } from "$lib/stores/models";
 	import Avatar from "../Avatar.svelte";
-	import IconCaret from "../Icons/IconCaret.svelte";
+	import IconCaret from "~icons/carbon/chevron-down";
 	import ModelSelectorModal from "./InferencePlaygroundModelSelectorModal.svelte";
 	import ProviderSelect from "./InferencePlaygroundProviderSelect.svelte";
 	import { defaultSystemMessage } from "./inferencePlaygroundUtils";
@@ -45,7 +45,11 @@
 			</div>
 			<div>{modelName}</div>
 		</div>
-		<IconCaret classNames="text-xl bg-gray-100 dark:bg-gray-600 rounded-sm size-4 flex-none absolute right-2" />
+		<div
+			class="absolute right-2 grid size-4 flex-none place-items-center rounded-sm bg-gray-100 text-xs dark:bg-gray-600"
+		>
+			<IconCaret />
+		</div>
 	</button>
 </div>
 

src/lib/components/InferencePlayground/InferencePlaygroundModelSelectorModal.svelte

@@ -4,8 +4,8 @@
 	import { createEventDispatcher, onMount, tick } from "svelte";
 
 	import { models } from "$lib/stores/models";
-	import IconSearch from "../Icons/IconSearch.svelte";
-	import IconStar from "../Icons/IconStar.svelte";
+	import IconSearch from "~icons/carbon/search";
+	import IconStar from "~icons/carbon/star";
 	import { getTrending } from "$lib/utils/model";
 	import fuzzysearch from "$lib/utils/search";
 
@@ -101,7 +101,9 @@
 			bind:this={containerEl}
 		>
 			<div class="flex items-center border-b px-3 dark:border-gray-800">
-				<IconSearch classNames="mr-2 text-sm" />
+				<div class="mr-2 text-sm">
+					<IconSearch />
+				</div>
 				<!-- svelte-ignore a11y-autofocus -->
 				<input
 					autofocus
@@ -127,7 +129,9 @@
 										dispatch("close");
 									}}
 								>
-									<IconStar classNames="lucide lucide-star mr-1.5 size-4 text-yellow-400" />
+									<div class="lucide lucide-star mr-1.5 size-4 text-yellow-400">
+										<IconStar />
+									</div>
 									<span class="inline-flex items-center"
 										><span class="text-gray-500 dark:text-gray-400">{nameSpace}</span><span
 											class="mx-1 text-gray-300 dark:text-gray-700">/</span

src/lib/components/InferencePlayground/InferencePlaygroundProjectSelect.svelte

@@ -2,9 +2,9 @@
 	import { getActiveProject, session } from "$lib/stores/session";
 	import { cn } from "$lib/utils/cn";
 	import { createSelect, createSync } from "@melt-ui/svelte";
-	import IconCaret from "../Icons/IconCaret.svelte";
+	import IconCaret from "~icons/carbon/chevron-down";
 	import IconDelete from "~icons/carbon/trash-can";
-	import IconCross from "../Icons/IconCross.svelte";
+	import IconCross from "~icons/carbon/close";
 	import IconSave from "~icons/carbon/save";
 	import IconEdit from "~icons/carbon/edit";
 
@@ -15,7 +15,7 @@
 
 	const {
 		elements: { trigger, menu, option },
-		states: { selected, open },
+		states: { selected },
 	} = createSelect<string, false>();
 	const sync = createSync({ selected });
 	$: sync.selected({ value: getActiveProject($session).id, label: getActiveProject($session).name }, p => {
@@ -40,7 +40,11 @@
 		<div class="flex items-center gap-1 text-sm">
 			{getActiveProject($session).name}
 		</div>
-		<IconCaret classNames="text-xl bg-gray-100 dark:bg-gray-600 rounded-sm size-4 flex-none absolute right-2" />
+		<div
+			class="absolute right-2 grid size-4 flex-none place-items-center rounded-sm bg-gray-100 text-xs dark:bg-gray-600"
+		>
+			<IconCaret />
+		</div>
 	</button>
 	{#if isDefault}
 		<button class="btn size-[32px] p-0" on:click={saveProject}>

src/lib/components/InferencePlayground/InferencePlaygroundProviderSelect.svelte

@@ -4,7 +4,7 @@
 	import { randomPick } from "$lib/utils/array";
 	import { cn } from "$lib/utils/cn";
 	import { createSelect, createSync } from "@melt-ui/svelte";
-	import IconCaret from "../Icons/IconCaret.svelte";
+	import IconCaret from "~icons/carbon/chevron-down";
 	import IconProvider from "../Icons/IconProvider.svelte";
 
 	export let conversation: Conversation;
@@ -84,7 +84,11 @@
 			<IconProvider provider={conversation.provider} />
 			{formatName(conversation.provider ?? "") ?? "loading"}
 		</div>
-		<IconCaret classNames="text-xl bg-gray-100 dark:bg-gray-600 rounded-sm size-4 flex-none absolute right-2" />
+		<div
+			class="absolute right-2 grid size-4 flex-none place-items-center rounded-sm bg-gray-100 text-xs dark:bg-gray-600"
+		>
+			<IconCaret />
+		</div>
 	</button>
 
 	<div {...$menu} use:menu class="rounded-lg border bg-gray-100 dark:border-gray-700 dark:bg-gray-800">