Replace svelte-hero-icons and @zipline-ai/icons with unplugin-icons

frontend/package.json

@@ -20,6 +20,7 @@
 		"test:unit:once": "vitest --run"
 	},
 	"devDependencies": {
+		"@iconify-json/heroicons": "^1.2.2",
 		"@internationalized/date": "^3.5.6",
 		"@playwright/test": "^1.28.1",
 		"@sveltejs/adapter-auto": "^3.0.0",
@@ -44,12 +45,12 @@
 		"prettier-plugin-svelte": "^3.1.2",
 		"svelte": "^5.0.4",
 		"svelte-check": "^4.0.0",
-		"svelte-hero-icons": "^5.2.0",
 		"svelte-intersection-observer": "^1.0.0",
 		"svelte-radix": "^1.1.1",
 		"tailwindcss": "^3.4.13",
 		"typescript": "^5.0.0",
 		"typescript-eslint": "^8.0.0",
+		"unplugin-icons": "^0.22.0",
 		"vite": "^5.0.3",
 		"vitest": "^2.0.0"
 	},
@@ -59,7 +60,6 @@
 		"@creditkarma/thrift-typescript": "^3.7.6",
 		"@types/echarts": "^4.9.22",
 		"@types/thrift": "^0.10.17",
-		"@zipline-ai/icons": "^1.0.2",
 		"clsx": "^2.1.1",
 		"d3": "^7.9.0",
 		"dotenv": "^16.4.5",

frontend/src/app.d.ts

@@ -1,3 +1,5 @@
+export * from 'unplugin-icons/types/svelte';
+
 // See https://kit.svelte.dev/docs/types#app
 // for information about these interfaces
 declare global {

frontend/src/lib/components/ActionButtons/ActionButtons.svelte

@@ -1,7 +1,12 @@
 <script lang="ts">
 	import { Button } from '$lib/components/ui/button';
 	import { cn } from '$lib/utils';
-	import { Icon, Plus, ArrowsUpDown, Square3Stack3d, XMark } from 'svelte-hero-icons';
+
+	import IconArrowsUpDown from '~icons/heroicons/arrows-up-down-16-solid';
+	import IconPlus from '~icons/heroicons/plus-16-solid';
+	import IconSquare3Stack3d from '~icons/heroicons/square-3-stack-3d-16-solid';
+	import IconXMark from '~icons/heroicons/x-mark-16-solid';
+
 	import { goto } from '$app/navigation';
 	import { page } from '$app/stores';
 	import {
@@ -41,14 +46,14 @@
 	{#if activeCluster}
 		<div class="flex flex-wrap gap-[1px]">
 			<Button variant="secondaryAlt" size="sm" icon="leading" disabled>
-				<Icon src={Square3Stack3d} micro size="16" />
+				<IconSquare3Stack3d />
 				Cluster by
 			</Button>
 			<Button variant="secondaryAlt" size="sm" disabled>
 				{activeCluster}
 			</Button>
 			<Button variant="secondaryAlt" size="sm" class="p-2" disabled>
-				<Icon src={XMark} micro size="16" />
+				<IconXMark />
 			</Button>
 		</div>
 	{/if}
@@ -57,17 +62,17 @@
 	<div class="flex gap-3">
 		{#if showSort}
 			<Button variant="secondary" size="sm" icon="leading" on:click={handleSort}>
-				<Icon src={ArrowsUpDown} micro size="16" />
+				<IconArrowsUpDown />
 				Sort {currentSort === 'asc' ? 'A-Z' : 'Z-A'}
 			</Button>
 		{/if}
 		<Button variant="secondary" size="sm" icon="leading" disabled>
-			<Icon src={Plus} micro size="16" />
+			<IconPlus />
 			Filter
 		</Button>
 		{#if showCluster}
 			<Button variant="secondary" size="sm" icon="leading" disabled>
-				<Icon src={Square3Stack3d} micro size="16" />
+				<IconSquare3Stack3d />
 				Cluster
 			</Button>
 		{/if}

frontend/src/lib/components/BreadcrumbNav/BreadcrumbNav.svelte

@@ -8,7 +8,7 @@
 	} from '$lib/components/ui/breadcrumb';
 	import BreadcrumbList from '$lib/components/ui/breadcrumb/breadcrumb-list.svelte';
 	import { cn } from '$lib/utils';
-	import { Icon, Slash } from 'svelte-hero-icons';
+	import IconSlash from '~icons/heroicons/slash';
 
 	const { breadcrumbs, class: className }: { breadcrumbs: string[]; class?: string } = $props();
 </script>
@@ -20,7 +20,7 @@
 		</BreadcrumbItem>
 		{#each breadcrumbs as crumb, index}
 			<BreadcrumbSeparator>
-				<Icon src={Slash} />
+				<IconSlash />
 			</BreadcrumbSeparator>
 			<BreadcrumbItem>
 				{#if index === breadcrumbs.length - 1}

frontend/src/lib/components/CollapsibleSection/CollapsibleSection.svelte

@@ -5,7 +5,8 @@
 		CollapsibleTrigger
 	} from '$lib/components/ui/collapsible';
 	import type { Snippet } from 'svelte';
-	import { Icon, ChevronDown } from 'svelte-hero-icons';
+	import IconChevronDown from '~icons/heroicons/chevron-down-16-solid';
+
 	let {
 		collapsibleContent,
 		headerContentLeft,
@@ -41,11 +42,8 @@
 <Collapsible bind:open class={sizeClasses.wrapper}>
 	<div class="flex mb-3">
 		<CollapsibleTrigger class="flex items-center space-x-4">
-			<Icon
-				src={ChevronDown}
-				micro
-				size="16"
-				class="transition-transform duration-200 {open ? '' : 'rotate-180'}"
+			<IconChevronDown
+				class="size-4 transition-transform duration-200 {open ? '' : 'rotate-180'}"
 			/>
 			<h2 class="{sizeClasses.title} !ml-2 select-text">{title}</h2>
 		</CollapsibleTrigger>

frontend/src/lib/components/CustomEChartLegend/CustomEChartLegend.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
 	import { Button } from '$lib/components/ui/button';
 	import type { EChartsType } from 'echarts';
-	import { Icon, ChevronDown, ChevronUp } from 'svelte-hero-icons';
+	import IconChevronDown from '~icons/heroicons/chevron-down-16-solid';
+
 	import { getSeriesColor, handleChartHighlight } from '$lib/util/chart';
+	import { cn } from '$lib/utils';
 
 	type LegendItem = { feature: string };
 	type Props = {
@@ -118,7 +120,9 @@
 				<div class="transition-opacity duration-150 absolute" class:opacity-0={!isExpanded}>
 					collapse
 				</div>
-				<Icon src={isExpanded ? ChevronUp : ChevronDown} micro size="16" class="ml-2" />
+				<IconChevronDown
+					class={cn('ml-2 transition-transform duration-200', isExpanded && '-rotate-180')}
+				/>
 			</Button>
 		{/if}
 	</div>

frontend/src/lib/components/DateRangeSelector/DateRangeSelector.svelte

@@ -10,7 +10,7 @@
 	} from '$lib/constants/date-ranges';
 	import { Button } from '$lib/components/ui/button';
 	import { Popover, PopoverContent, PopoverTrigger } from '$lib/components/ui/popover';
-	import { Icon, CalendarDateRange } from 'svelte-hero-icons';
+	import IconCalendarDateRange from '~icons/heroicons/calendar-date-range-16-solid';
 	import type { DateRange } from 'bits-ui';
 	import { DateFormatter, getLocalTimeZone, fromAbsolute } from '@internationalized/date';
 	import { cn } from '$lib/utils';
@@ -131,7 +131,7 @@
 				)}
 				builders={[builder]}
 			>
-				<Icon src={CalendarDateRange} micro size="16" />
+				<IconCalendarDateRange />
 			</Button>
 		</PopoverTrigger>
 		<PopoverContent class="w-auto p-0" align="start">

frontend/src/lib/components/InfoTooltip/InfoTooltip.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
 	import { Tooltip, TooltipContent, TooltipTrigger } from '$lib/components/ui/tooltip';
-	import { Icon, InformationCircle } from 'svelte-hero-icons';
+	import IconInformationCircle from '~icons/heroicons/information-circle-16-solid';
 
 	let { text, maxWidth = '321px' }: { text: string; maxWidth?: string } = $props();
 </script>
 
 <Tooltip openDelay={100} closeOnPointerDown={false}>
 	<TooltipTrigger>
-		<Icon src={InformationCircle} micro size="16" class="text-muted-icon-neutral" />
+		<IconInformationCircle class="text-muted-icon-neutral" />
 	</TooltipTrigger>
 	<TooltipContent side="bottom" align="start" style="max-width: {maxWidth};">
 		<p style="max-width: {maxWidth};">

frontend/src/lib/components/NavigationBar/NavigationBar.svelte

@@ -20,21 +20,19 @@
 		DropdownMenuContent,
 		DropdownMenuItem
 	} from '$lib/components/ui/dropdown-menu/';
-	import {
-		Icon,
-		ChevronDown,
-		MagnifyingGlass,
-		User,
-		DocumentText,
-		ExclamationTriangle,
-		AdjustmentsHorizontal,
-		ArrowsUpDown
-	} from 'svelte-hero-icons';
 	import { goto } from '$app/navigation';
 	import { isMacOS } from '$lib/util/browser';
 	import { Badge } from '$lib/components/ui/badge';
 	import { getEntity, type Entity } from '$lib/types/Entity/Entity';
 
+	import IconArrowsUpDown from '~icons/heroicons/arrows-up-down-16-solid';
+	import IconAdjustmentsHorizontal from '~icons/heroicons/adjustments-horizontal-16-solid';
+	import IconChevronDown from '~icons/heroicons/chevron-down';
+	import IconDocumentText from '~icons/heroicons/document-text-16-solid';
+	import IconExclamationTriangle from '~icons/heroicons/exclamation-triangle-16-solid';
+	import IconMagnifyingGlass from '~icons/heroicons/magnifying-glass-16-solid';
+	import IconUser from '~icons/heroicons/user';
+
 	type Props = {
 		navItems: Entity[];
 		user: { name: string; avatar: string };
@@ -99,7 +97,7 @@
 		onclick={() => (open = true)}
 		icon="leading"
 	>
-		<Icon src={MagnifyingGlass} micro size="16" class="text-foreground" />
+		<IconMagnifyingGlass class="text-foreground" />
 		<span class="text-muted-foreground">Search</span>
 		{#if isMac !== undefined}
 			<span class="ml-auto text-xs text-muted-foreground">
@@ -122,7 +120,7 @@
 		rel="noopener noreferrer"
 		icon="leading"
 	>
-		<Icon src={DocumentText} micro size="16" class="text-muted-icon-neutral" />
+		<IconDocumentText class="text-muted-icon-neutral" />
 		<span class="text-muted-foreground">Chronon docs</span>
 	</Button>
 	<span class="mb-[10px] px-2 text-xs-medium text-muted-foreground">Observability</span>
@@ -135,10 +133,7 @@
 					href={item.path}
 					icon="leading"
 				>
-					<Icon
-						src={item.icon}
-						micro
-						size="16"
+					<item.icon
 						class={isActiveRoute(item.path) ? 'text-muted-icon-primary' : 'text-muted-icon-neutral'}
 					/>
 					{item.label}
@@ -153,11 +148,11 @@
 					<Avatar class="h-4 w-4">
 						<AvatarImage src={user.avatar} alt={user.name} />
 						<AvatarFallback>
-							<Icon src={User} />
+							<IconUser />
 						</AvatarFallback>
 					</Avatar>
 					<span class="ml-3">{user.name}</span>
-					<Icon src={ChevronDown} size="16" class="ml-3" />
+					<IconChevronDown class="ml-3" />
 				</Button>
 			</DropdownMenuTrigger>
 			<DropdownMenuContent>
@@ -180,21 +175,21 @@
 			{#if input === ''}
 				<CommandGroup heading="Quick actions">
 					<CommandItem disabled>
-						<Icon src={ExclamationTriangle} micro size="16" />
+						<IconExclamationTriangle />
 						Show only models with alerts</CommandItem
 					>
 					<CommandItem disabled>
-						<Icon src={AdjustmentsHorizontal} micro size="16" />
+						<IconAdjustmentsHorizontal />
 						Filter by...</CommandItem
 					>
 					<CommandItem disabled>
-						<Icon src={ArrowsUpDown} micro size="16" />
+						<IconArrowsUpDown />
 						Sort by...</CommandItem
 					>
 				</CommandGroup>
 				<CommandGroup heading="Learn">
 					<CommandItem onSelect={() => window.open('https://docs.chronon.ai', '_blank')}>
-						<Icon src={DocumentText} micro size="16" />
+						<IconDocumentText />
 						Chronon docs</CommandItem
 					>
 				</CommandGroup>
@@ -208,8 +203,8 @@
 						onSelect={() =>
 							handleSelect(`${getEntity('joins').path}/${encodeURIComponent(entity.name)}`)}
 					>
-						<Icon src={getEntity('joins').icon} micro size="16" />
-						{entity.name}
+						{@const IconJoins = getEntity('joins').icon}
+						<IconJoins />
 					</CommandItem>
 				{/each}
 			</CommandGroup>

frontend/src/lib/components/PageHeader/PageHeader.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import Button from '$lib/components/ui/button/button.svelte';
-	import { Icon, BookOpen } from 'svelte-hero-icons';
+	import IconBookOpen from '~icons/heroicons/book-open-16-solid';
 
 	let { title, children }: { title: string; children?: Snippet } = $props();
 
@@ -17,7 +17,7 @@
 			{@render children()}
 		{/if}
 		<Button variant="outline" onclick={openChronon} icon="leading" size="sm">
-			<Icon src={BookOpen} micro size="16" class="text-neutral-800" />
+			<IconBookOpen class="text-neutral-800" />
 			<span class="text-neutral-800">Learn</span>
 		</Button>
 	</div>

frontend/src/lib/components/ResetZoomButton/ResetZoomButton.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
 	import { Button } from '$lib/components/ui/button';
 	import { cn } from '$lib/utils';
-	import { Icon, ArrowUturnLeft } from 'svelte-hero-icons';
+	import IconArrowUturnLeft from '~icons/heroicons/arrow-uturn-left-16-solid';
 
 	const { onClick, class: className }: { onClick: () => void; class?: string } = $props();
 </script>
 
 <Button on:click={onClick} variant="outline" icon="leading" class={cn('', className)} size="sm">
-	<Icon src={ArrowUturnLeft} micro size="16" />
+	<IconArrowUturnLeft />
 	Reset Zoom
 </Button>

frontend/src/lib/components/SplitView/SplitView.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { quintOut } from 'svelte/easing';
-	import { Icon, XMark } from 'svelte-hero-icons';
+	import IconXMark from '~icons/heroicons/x-mark';
 
 	import { tweened } from 'svelte/motion';
 	import type { Snippet } from 'svelte';
@@ -59,7 +59,7 @@
 				class="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none"
 				onclick={() => (sidebarOpen = false)}
 			>
-				<Icon src={XMark} size="16" />
+				<IconXMark class="text-sm" />
 				<span class="sr-only">Close</span>
 			</button>
 			<div class="overflow-hidden">

frontend/src/lib/types/Entity/Entity.ts

@@ -1,22 +1,24 @@
-import { Cube, PuzzlePiece, Square3Stack3d } from 'svelte-hero-icons';
+import IconCube from '~icons/heroicons/cube-16-solid';
+import IconPuzzlePiece from '~icons/heroicons/puzzle-piece-16-solid';
+import IconSquare3Stack3d from '~icons/heroicons/square-3-stack-3d-16-solid';
 
 export const entityConfig = [
 	{
 		label: 'Models',
 		path: '/models',
-		icon: Cube,
+		icon: IconCube,
 		id: 'models'
 	},
 	{
 		label: 'GroupBys',
 		path: '/groupbys',
-		icon: PuzzlePiece,
+		icon: IconPuzzlePiece,
 		id: 'groupbys'
 	},
 	{
 		label: 'Joins',
 		path: '/joins',
-		icon: Square3Stack3d,
+		icon: IconSquare3Stack3d,
 		id: 'joins'
 	}
 ] as const;