feat: using unocss to add icons

astro.config.mjs

@@ -1,11 +1,12 @@
 import cloudflare from "@astrojs/cloudflare";
 import react from "@astrojs/react";
 import { defineConfig } from "astro/config";
+import UnoCSS from "unocss/astro";
 
 // https://astro.build/config
 export default defineConfig({
   adapter: cloudflare(),
-  integrations: [react()],
+  integrations: [react(), UnoCSS()],
   i18n: {
     defaultLocale: "zh-cn",
     locales: ["en", "zh-cn", "zh-hk", "ja"],

package.json

@@ -19,11 +19,13 @@
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
     "astro": "^5.0.0",
-    "flag-icons": "^7.5.0",
     "react": "^19.2.3",
     "react-dom": "^19.2.3"
   },
   "devDependencies": {
-    "@biomejs/biome": "2.3.8"
+    "@biomejs/biome": "2.3.8",
+    "@iconify-json/flag": "^1.2.10",
+    "@unocss/preset-icons": "^66.5.10",
+    "unocss": "^66.5.10"
   }
 }

src/components/LanguagePicker.astro

@@ -1,17 +1,16 @@
 ---
 import { languages } from "../i18n/ui";
 import { getLangFromUrl, getTranslatedPath } from "../i18n/utils";
-import "flag-icons/css/flag-icons.min.css";
 
 const lang = getLangFromUrl(Astro.url);
 const translatePath = getTranslatedPath(lang);
 
 // https://flagicons.lipis.dev/
 const flags: Record<string, string> = {
-  en: "fi fi-us",
-  "zh-cn": "fi fi-cn",
-  "zh-hk": "fi fi-hk",
-  ja: "fi fi-jp",
+  en: "i-flag:us-4x3",
+  "zh-cn": "i-flag:cn-4x3",
+  "zh-hk": "i-flag:hk-4x3",
+  ja: "i-flag:jp-4x3",
 };
 
 const currentFlagClass = flags[lang];

uno.config.ts

@@ -0,0 +1,6 @@
+import { defineConfig } from "unocss";
+import presetIcons from "@unocss/preset-icons";
+
+export default defineConfig({
+  presets: [presetIcons()],
+});