refact: migrate icons, with unplugin-icons

package.json

@@ -14,17 +14,16 @@
 		"test": "vitest"
 	},
 	"dependencies": {
-		"@steeze-ui/heroicons": "^2.3.0",
-		"@steeze-ui/svelte-icon": "^1.5.0",
 		"idb": "^8.0.0",
 		"mini-svg-data-uri": "^1.4.4",
 		"smplr": "^0.12.2"
 	},
 	"devDependencies": {
+		"@iconify-json/heroicons": "^1.1.21",
 		"@sveltejs/adapter-auto": "^3.1.0",
 		"@sveltejs/adapter-static": "^3.0.1",
 		"@sveltejs/kit": "^2.5.0",
-		"@sveltejs/vite-plugin-svelte": "^3.0.1",
+		"@sveltejs/vite-plugin-svelte": "^3.1.1",
 		"@types/eslint": "^8.56.7",
 		"@vite-pwa/assets-generator": "^0.2.3",
 		"@vite-pwa/sveltekit": "^0.3.0",
@@ -39,12 +38,13 @@
 		"prettier-plugin-svelte": "^3.2.4",
 		"prettier-plugin-tailwindcss": "^0.6.3",
 		"sass": "^1.70.0",
-		"svelte": "^5.0.0-next.152",
+		"svelte": "^5.0.0-next.155",
 		"svelte-check": "^3.6.3",
 		"tailwindcss": "^3.4.1",
 		"tslib": "^2.4.1",
 		"typescript": "^5.3.3",
 		"typescript-eslint": "^8.0.0-alpha.20",
+		"unplugin-icons": "^0.19.0",
 		"vite": "^5.0.11",
 		"vite-plugin-pwa": "^0.17.4",
 		"vitest": "^1.2.2"

src/app.d.ts

@@ -1,6 +1,7 @@
 import 'vite-plugin-pwa/info';
 import 'vite-plugin-pwa/svelte';
 import 'vite-plugin-pwa/types';
+import 'unplugin-icons/types/svelte';
 
 // See https://kit.svelte.dev/docs/types#app
 // for information about these interfaces

src/lib/device/metronome/MetronomeBeats.svelte

@@ -1,10 +1,14 @@
 <script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
 	import { getMetronomeContext } from './context';
 
 	const metronome = getMetronomeContext();
 
-	let beatPerBar = metronome.timer.tempoState.beatPerBar,
-		currentBeat = 0;
+	interface MetronomeBeatsProps extends HTMLAttributes<HTMLDivElement> {}
+	const { ...rest }: MetronomeBeatsProps = $props();
+
+	let beatPerBar = $state(metronome.timer.tempoState.beatPerBar);
+	let currentBeat = $state(0);
 	metronome.onBeat((state) => {
 		currentBeat = state.currentBeat;
 	});
@@ -14,8 +18,8 @@
 </script>
 
 <div
-	{...$$restProps}
-	class="{$$props.class} relative flex w-screen flex-row flex-wrap items-center justify-center gap-[40px]"
+	{...rest}
+	class="{rest.class} relative flex w-screen flex-row flex-wrap items-center justify-center gap-[40px]"
 >
 	{#each new Array(beatPerBar) as _, i}
 		{#if i === 0}

src/lib/device/metronome/MetronomePlayButton.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
 	import { getMetronomeContext } from '$/lib/device/metronome/context';
-	import { Play, Stop } from '@steeze-ui/heroicons';
-	import { Icon } from '@steeze-ui/svelte-icon';
 	import { onDestroy } from 'svelte';
 	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import IconPlaySolid from '~icons/heroicons/play-solid';
+	import IconStopSolid from '~icons/heroicons/stop-solid';
 
 	interface MetronomePlayButtonProps extends HTMLButtonAttributes {}
 	const { ...rest }: MetronomePlayButtonProps = $props();
@@ -32,8 +32,8 @@
 	}}
 >
 	{#if isRunning}
-		<Icon class="m-0 h-1/2 p-0 text-indigo-100" src={Stop} theme="solid" />
+		<IconStopSolid class="m-0 h-1/2 w-1/2 p-0 text-indigo-100"></IconStopSolid>
 	{:else}
-		<Icon class="m-0 h-1/2 p-0 text-indigo-100" src={Play} theme="solid" />
+		<IconPlaySolid class="m-0 h-1/2 w-1/2 p-0 text-indigo-100"></IconPlaySolid>
 	{/if}
 </button>

src/lib/ui/PlusMinusBarButton.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { MinusSmall, PlusSmall } from '@steeze-ui/heroicons';
-	import { Icon } from '@steeze-ui/svelte-icon';
-	import type { HTMLAttributes, HTMLCanvasAttributes } from 'svelte/elements';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import IconMinusSmall from '~icons/heroicons/minus-small';
+	import IconPlusSmall from '~icons/heroicons/plus-small';
 
 	interface PlusMinusBarButtonProps {
 		value: number;
@@ -27,7 +27,7 @@
 			if (max !== null) value = value > max ? max : value;
 		}}
 	>
-		<Icon src={PlusSmall}></Icon>
+		<IconPlusSmall></IconPlusSmall>
 	</button>
 	<button
 		class="btn join-item h-4 min-h-4 w-4 min-w-4 p-0"
@@ -36,6 +36,6 @@
 			if (min !== null) value = value < min ? min : value;
 		}}
 	>
-		<Icon src={MinusSmall}></Icon>
+		<IconMinusSmall />
 	</button>
 </div>

src/lib/ui/SvgIcon.svelte

@@ -1,9 +1,13 @@
 <script lang="ts">
+	import type { Snippet } from 'svelte';
 	import type { SVGAttributes } from 'svelte/elements';
 
-	interface $$Props extends SVGAttributes<SVGElement> {}
+	interface SvgIconProps extends SVGAttributes<SVGElement> {
+		children: Snippet;
+	}
+	const { children, ...rest }: SvgIconProps = $props();
 </script>
 
-<svg {...$$restProps}>
-	<slot />
+<svg {...rest}>
+	{@render children()}
 </svg>

src/routes/practice/(practice)/+layout.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">
 	import { clickoutside } from '$/utils/hooks/click-outside';
 	import { base } from '$app/paths';
-	import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from '@steeze-ui/heroicons';
-	import { Icon } from '@steeze-ui/svelte-icon';
 	import type { Snippet } from 'svelte';
+	import ChevronDown from '~icons/heroicons/chevron-down-16-solid';
+	import ChevronLeft from '~icons/heroicons/chevron-left-solid';
+	import ChevronRight from '~icons/heroicons/chevron-right-solid';
+	import ChevronUp from '~icons/heroicons/chevron-up-16-solid';
 	import type { LayoutData } from './$types';
 
 	interface PracticeLayoutProps {
@@ -29,7 +31,7 @@
 					href={`${base}/practice/${data.category}/${data.pages.previous.slug}`}
 					class="mr-8 flex h-full cursor-pointer select-none flex-row items-center gap-4 text-indigo-400 transition duration-200 hover:text-indigo-600 active:text-indigo-800"
 				>
-					<Icon class="h-[30px] w-auto" src={ChevronLeft} theme="solid" />
+					<ChevronLeft class="h-[30px] w-auto" />
 					<span
 						class="invisible whitespace-nowrap text-black hover:text-indigo-600 active:text-indigo-800 lg:visible"
 						>{data.pages.previous.title}</span
@@ -39,7 +41,7 @@
 				<div
 					class="mr-8 flex h-full select-none flex-row items-center gap-4 text-gray-300 transition duration-200"
 				>
-					<Icon class="h-[30px] w-auto" src={ChevronLeft} theme="solid" />
+					<ChevronLeft class="h-[30px] w-auto" />
 				</div>
 			{/if}
 			{#if data.pages.next}
@@ -51,13 +53,13 @@
 						class="invisible whitespace-nowrap text-black hover:text-indigo-600 active:text-indigo-800 lg:visible"
 						>{data.pages.next.title}</span
 					>
-					<Icon class="h-[30px] w-auto" src={ChevronRight} theme="solid" />
+					<ChevronRight class="h-[30px] w-auto" />
 				</a>
 			{:else}
 				<div
 					class="ml-8 flex h-full select-none flex-row items-center gap-4 text-gray-300 transition duration-200"
 				>
-					<Icon class="h-[30px] w-auto" src={ChevronRight} theme="solid" />
+					<ChevronRight class="h-[30px] w-auto" />
 				</div>
 			{/if}
 		</div>
@@ -70,11 +72,15 @@
 				onclickoutside={() => (practiceListOpen = false)}
 				class="absolute -top-[30px] left-[50%] h-[40px] w-auto -translate-x-[50%]"
 			>
-				<Icon
-					class="opacity-25% hover:opacity-100% h-[20px] w-auto cursor-pointer transition-opacity"
-					src={practiceListOpen ? ChevronDown : ChevronUp}
-					theme="mini"
-				/>
+				{#if practiceListOpen}
+					<ChevronDown
+						class="opacity-25% hover:opacity-100% h-[20px] w-auto cursor-pointer transition-opacity"
+					/>
+				{:else}
+					<ChevronUp
+						class="opacity-25% hover:opacity-100% h-[20px] w-auto cursor-pointer transition-opacity"
+					/>
+				{/if}
 				{#if practiceListOpen}
 					<div
 						class="absolute bottom-full left-1/2 max-h-80 w-80 -translate-x-1/2 -translate-y-[1rem] rounded bg-gray-500 p-4"

src/routes/tools/+layout.svelte

@@ -1,10 +1,16 @@
 <script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface ToolsLayoutProps {
+		children: Snippet;
+	}
+	const { children }: ToolsLayoutProps = $props();
 </script>
 
 <div class="flex h-screen w-screen flex-col">
 	<header class="flex h-[60px] w-screen flex-row items-center">
 		<span class="ml-8 font-jazz text-2xl font-bold"> JazzyDalpeng / Jazz Guitar Practice</span>
 	</header>
-	<slot />
+	{@render children()}
 	<nav class="h-60px relative w-screen"></nav>
 </div>

src/routes/tools/+page.svelte

@@ -8,28 +8,28 @@
 	const SQUARE_SIZE_MIN = 240;
 	const GAP_SQUARE_RATIO = 6;
 	const GAP_MIN = SQUARE_SIZE_MIN / GAP_SQUARE_RATIO;
-	let windowSize = {
+	let windowSize = $state({
 		long: Math.max(window.innerWidth, window.innerHeight),
 		short: Math.min(window.innerWidth, window.innerHeight)
-	};
-	$: maxCenterSquares = Math.floor(
-		((windowSize.short * 0.8) / GAP_MIN + 1) / (GAP_SQUARE_RATIO + 1)
+	});
+	const maxCenterSquares = $derived(
+		Math.floor(((windowSize.short * 0.8) / GAP_MIN + 1) / (GAP_SQUARE_RATIO + 1))
 	);
-	$: gap = (windowSize.short * 0.8) / ((GAP_SQUARE_RATIO + 1) * maxCenterSquares - 1);
-	$: squareSize = gap * GAP_SQUARE_RATIO;
-	$: start = {
+	const gap = $derived((windowSize.short * 0.8) / ((GAP_SQUARE_RATIO + 1) * maxCenterSquares - 1));
+	const squareSize = $derived(gap * GAP_SQUARE_RATIO);
+	const start = $derived({
 		x: window.innerWidth * 0.5 - windowSize.short * 0.4,
 		y: window.innerHeight * 0.5 - windowSize.short * 0.4
-	};
+	});
 
-	$: xFillerSquares = Math.ceil(start.x / ((GAP_SQUARE_RATIO + 1) * gap));
-	$: yFillerSquares = Math.ceil(start.y / ((GAP_SQUARE_RATIO + 1) * gap));
-	$: xSquares = maxCenterSquares + xFillerSquares * 2;
-	$: ySquares = maxCenterSquares + yFillerSquares * 2;
-	$: fillerStart = {
+	const xFillerSquares = $derived(Math.ceil(start.x / ((GAP_SQUARE_RATIO + 1) * gap)));
+	const yFillerSquares = $derived(Math.ceil(start.y / ((GAP_SQUARE_RATIO + 1) * gap)));
+	const xSquares = $derived(maxCenterSquares + xFillerSquares * 2);
+	const ySquares = $derived(maxCenterSquares + yFillerSquares * 2);
+	const fillerStart = $derived({
 		x: start.x - xFillerSquares * (GAP_SQUARE_RATIO + 1) * gap,
 		y: start.y - yFillerSquares * (GAP_SQUARE_RATIO + 1) * gap
-	};
+	});
 
 	const updateOnResize: UIEventHandler<Window> = (ev) => {
 		windowSize = {
@@ -39,7 +39,7 @@
 	};
 </script>
 
-<svelte:window on:resize={updateOnResize} />
+<svelte:window onresize={updateOnResize} />
 <main class="neumorph-container relative h-full overflow-clip">
 	{#each Array(xSquares) as _, i}
 		{@const x = fillerStart.x + i * gap * (GAP_SQUARE_RATIO + 1)}

src/routes/tools/chord-finder/Board.svelte

@@ -21,8 +21,6 @@
 		sortPitches(getPitchesFromFingerPositions(fingers.map((finger) => finger.position)))
 	);
 	const chords = $derived(identifyChordsFromPitches(pitches));
-
-	$inspect(fingers);
 </script>
 
 <div class="relative flex h-full flex-col items-center justify-center">

svelte.config.js

@@ -4,6 +4,9 @@ import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
 	preprocess: vitePreprocess(),
+	compilerOptions: {
+		runes: true
+	},
 	kit: {
 		adapter: adapter({
 			fallback: '404.html'

vite.config.ts

@@ -1,6 +1,6 @@
 /// <reference types="vitest" />
 import { sveltekit } from '@sveltejs/kit/vite';
-import { SvelteKitPWA } from '@vite-pwa/sveltekit';
+import Icons from 'unplugin-icons/vite';
 import { defineConfig } from 'vite';
 
 export default defineConfig({
@@ -10,7 +10,11 @@ export default defineConfig({
 		'process.env.NODE_ENV': process.env.NODE_ENV === 'production' ? '"production"' : '"development"'
 	},
 	plugins: [
-		sveltekit()
+		sveltekit(),
+		Icons({
+			compiler: 'svelte',
+			autoInstall: true
+		})
 		// SvelteKitPWA({
 		// 	strategies: 'injectManifest',
 		// 	srcDir: 'src',