refactor: switch to iconify

Author: hyperz111

src/components/Icon.svelte

@@ -1,5 +1,15 @@
 <script>
+	import { icons } from "@iconify-json/simple-icons/icons.json";
+	import { height } from "@iconify-json/simple-icons/info.json";
+
 	let { icon, class: classes, ...rest } = $props();
 </script>
 
-<span class="bi bi-{icon} {classes}" {...rest}></span>
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width={height}
+	{height}
+	fill="currentColor"
+	viewBox="0 0 {height} {height}"
+	class={classes}
+	{...rest}>{@html icons[icon]?.body ?? ""}</svg>

src/components/Navbar.svelte

@@ -5,7 +5,7 @@
 	const pages = [
 		{
 			name: "Blog",
-			icon: "book-half",
+			icon: "bookstack",
 			url: "/blogs",
 		},
 	];
@@ -27,7 +27,7 @@
 		<ul class="flex flex-row gap-4">
 			{#each menu as { name, icon, url } (url)}
 				<li>
-					<a href={url} title={name} class="hover:text-neutral-300">
+					<a href={url} title={name} class="flex gap-2 hover:text-neutral-300">
 						<Icon {icon} />
 						<span class="hidden md:inline">{name}</span>
 					</a>

src/routes/+page.svelte

@@ -59,7 +59,7 @@
 				<p class="**:inline">
 					Halo, saya <b>Hyper-Z11</b>. Seorang programmer pemula. Nama asli saya adalah
 					<b>Firjatullah Zeroun</b>. Saya dari
-					<a href="https://id.wikipedia.org/wiki/Indonesia"><b><Icon icon="pin-map" class="mx-1" />Indonesia</b></a>. Saya
+					<a href="https://id.wikipedia.org/wiki/Indonesia"><b><Icon icon="googlemaps" class="h-5" />Indonesia</b></a>. Saya
 					suka koding sebagai hobi saya dan berkontribusi ke proyek sumber terbuka jika saya mau. Anda mungkin tidak akan
 					menemukan banyak hal disini. Jadi terima kasih sudah berkunjung. Dan jika anda mau, mungkin anda bisa mengunjungi
 					<a href="/blogs">kumpulan blog saya</a>.

src/routes/data-for-home.json

@@ -29,7 +29,7 @@
 		},
 		{
 			"name": "JSON",
-			"icon": "braces",
+			"icon": "json",
 			"color": "orange"
 		},
 		{
@@ -39,7 +39,7 @@
 		},
 		{
 			"name": "HTML",
-			"icon": "code-slash",
+			"icon": "html5",
 			"color": "orange"
 		},
 		{
@@ -56,22 +56,22 @@
 		},
 		{
 			"name": "Node.js",
-			"icon": "app",
+			"icon": "nodedotjs",
 			"color": "green"
 		},
 		{
 			"name": "Vite",
-			"icon": "lightning",
+			"icon": "vite",
 			"color": "darkviolet"
 		},
 		{
 			"name": "NPM",
-			"icon": "app",
+			"icon": "npm",
 			"color": "red"
 		},
 		{
 			"name": "PNPM",
-			"icon": "app",
+			"icon": "pnpm",
 			"color": "yellow"
 		}
 	]

src/styles/index.css

@@ -1,5 +1,4 @@
 @import "tailwindcss";
-@import "bootstrap-icons/font/bootstrap-icons.css";
 
 @keyframes down {
 	from {

vite.config.js

@@ -4,4 +4,7 @@ import tailwindcss from "@tailwindcss/vite";
 
 export default defineConfig({
 	plugins: [sveltekit(), tailwindcss()],
+	json: {
+		namedExports: true,
+	},
 });