style: replace emoji flags with flag-icons svg

bun.lock

@@ -10,6 +10,7 @@
         "@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",
       },
@@ -495,6 +496,8 @@
 
     "fdir": ["fdir@6.5.0", "https://registry.npmmirror.com/fdir/-/fdir-6.5.0.tgz", { "peerDependencies": { "picomatch": "^3 || ^4" }, "optionalPeers": ["picomatch"] }, "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg=="],
 
+    "flag-icons": ["flag-icons@7.5.0", "", {}, "sha512-kd+MNXviFIg5hijH766tt+3x76ele1AXlo4zDdCxIvqWZhKt4T83bOtxUOOMlTx/EcFdUMH5yvQgYlFh1EqqFg=="],
+
     "flattie": ["flattie@1.1.1", "https://registry.npmmirror.com/flattie/-/flattie-1.1.1.tgz", {}, "sha512-9UbaD6XdAL97+k/n+N7JwX46K/M6Zc6KcFYskrYL8wbBV/Uyk0CTAMY0VT+qiK5PM7AIc9aTWYtq65U7T+aCNQ=="],
 
     "fontace": ["fontace@0.3.1", "https://registry.npmmirror.com/fontace/-/fontace-0.3.1.tgz", { "dependencies": { "@types/fontkit": "^2.0.8", "fontkit": "^2.0.4" } }, "sha512-9f5g4feWT1jWT8+SbL85aLIRLIXUaDygaM2xPXRmzPYxrOMNok79Lr3FGJoKVNKibE0WCunNiEVG2mwuE+2qEg=="],

package.json

@@ -19,6 +19,7 @@
     "@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"
   },

src/components/LanguagePicker.astro

@@ -1,24 +1,32 @@
 ---
 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: "🇺🇸",
-  "zh-cn": "🇨🇳",
-  "zh-hk": "🇭🇰",
-  ja: "🇯🇵",
+  en: "fi fi-us",
+  "zh-cn": "fi fi-cn",
+  "zh-hk": "fi fi-hk",
+  ja: "fi fi-jp",
 };
 
-const currentFlag = flags[lang] || "🏳️";
+const currentFlagClass = flags[lang];
 const currentLabel = languages[lang as keyof typeof languages] || lang;
 ---
 
 <div class="lang-dropdown">
   <button class="lang-toggle-btn" aria-label="Select Language">
-    <span class="lang-flag">{currentFlag}</span>
+    {
+      currentFlagClass ? (
+        <span class={`lang-flag ${currentFlagClass}`} />
+      ) : (
+        <span class="lang-flag">🏳️</span>
+      )
+    }
     <span class="lang-text">{currentLabel}</span>
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -43,7 +51,11 @@ const currentLabel = languages[lang as keyof typeof languages] || lang;
           href={translatePath("/", label)}
           class={`menu-item ${lang === label ? "active" : ""}`}
         >
-          <span class="item-flag">{flags[label] || "🏳️"}</span>
+          {flags[label] ? (
+            <span class={`item-flag ${flags[label]}`} />
+          ) : (
+            <span class="item-flag">🏳️</span>
+          )}
           <span class="item-text">{name}</span>
         </a>
       ))
@@ -104,6 +116,7 @@ const currentLabel = languages[lang as keyof typeof languages] || lang;
 
   .lang-flag {
     font-size: 1.1rem;
+    border-radius: 4px;
   }
 
   .lang-text {
@@ -179,6 +192,7 @@ const currentLabel = languages[lang as keyof typeof languages] || lang;
 
   .item-flag {
     font-size: 1.2rem;
+    border-radius: 2px;
   }
 
   .item-text {