refactor: make iconify tree-shakeable

Author: hyperz111

scripts/iconify-plugin.js

@@ -0,0 +1,34 @@
+import data from "@iconify-json/simple-icons/icons.json" with { type: "json" };
+
+const ID = "virtual:iconify-simple-icons";
+
+/**
+ * Vite plugin to make iconify simple icons data is tree-shakeable
+ * @param {Array<string>} icons Icons you want to include.
+ */
+export function iconify(icons) {
+	return /** @type {import("vite").Plugin} */ ({
+		name: "iconify",
+		resolveId(id) {
+			if (id === ID) {
+				return ID;
+			}
+		},
+		load(id) {
+			if (id === ID) {
+				let code = "export default {\n";
+
+				for (const icon of icons) {
+					if (!(icon in data.icons)) {
+						this.info(`Icon \`${icon}\` is not available.`);
+						continue;
+					}
+					code += `"${icon}": ${JSON.stringify(data.icons[icon].body)},\n`;
+				}
+
+				code += "}\n";
+				return code;
+			}
+		},
+	});
+}

src/components/Icon.svelte

@@ -1,8 +1,18 @@
 <script>
-	import { icons } from "@iconify-json/simple-icons/icons.json";
+	import data from "virtual:iconify-simple-icons";
 	import { height } from "@iconify-json/simple-icons/info.json";
 
 	let { icon, class: classes, ...rest } = $props();
+
+	const icons = new Proxy(data, {
+		get(o, p) {
+			if (p in o) {
+				return o[p];
+			} else {
+				throw new Error(`Icon \`${p}\` is not available.`);
+			}
+		},
+	});
 </script>
 
 <svg
@@ -12,4 +22,4 @@
 	fill="currentColor"
 	viewBox="0 0 {height} {height}"
 	class={classes}
-	{...rest}>{@html icons[icon]?.body ?? ""}</svg>
+	{...rest}>{@html icons[icon] ?? ""}</svg>

vite.config.js

@@ -1,9 +1,23 @@
 import { sveltekit } from "@sveltejs/kit/vite";
 import { defineConfig } from "vite";
 import tailwindcss from "@tailwindcss/vite";
+import { iconify } from "./scripts/iconify-plugin.js";
+import dataForHome from "./src/routes/data-for-home.json" with { type: "json" };
 
 export default defineConfig({
-	plugins: [sveltekit(), tailwindcss()],
+	plugins: [
+		sveltekit(),
+		tailwindcss(),
+		/* prettier-ignore */
+		iconify([
+			...dataForHome.languages.map((data) => data.icon),
+			...dataForHome.tools.map((data) => data.icon),
+			...dataForHome.frameworkLibrary.map((data) => data.icon),
+			"bookstack",
+			"github",
+			"googlemaps"
+		]),
+	],
 	json: {
 		namedExports: true,
 	},