Load flags from SVG files with aliases and fallback; add SVG flags for missing languages (globe, ja, ko, id, fa, he, az, hy, am, ms, vi, th, tl, sw, uz, ta, te); build verified

src/App.vue

@@ -26,6 +26,25 @@ const isLangOpen = ref(false);
 const langMenuRef = ref(null);
 let displayModeMedia = null;
 let prefersColorSchemeMedia = null;
+const flagModules = import.meta.glob('./assets/flags/*.svg', { eager: true, as: 'url' });
+const flagMap = Object.fromEntries(
+  Object.entries(flagModules).map(([path, url]) => [path.split('/').pop().replace('.svg', ''), url])
+);
+const flagAliases = {
+  'pt-br': 'pt',
+  'pt-pt': 'pt',
+  'fr-ca': 'fr',
+  'nl-be': 'nl',
+  'es-es': 'es',
+  'es-419': 'es',
+  'zh-hans': 'zh',
+  'zh-hant': 'zh'
+};
+const getFlagUrl = (code) => {
+  const base = flagAliases[code] || code;
+  return flagMap[base] || flagMap['globe'] || null;
+};
+
 const languageFlags = {
   en: '<svg viewBox="0 0 24 16" xmlns="http://www.w3.org/2000/svg"><rect width="24" height="16" fill="#b22234"/><rect y="2" width="24" height="2" fill="#fff"/><rect y="6" width="24" height="2" fill="#fff"/><rect y="10" width="24" height="2" fill="#fff"/><rect y="14" width="24" height="2" fill="#fff"/><rect width="10" height="8" fill="#3c3b6e"/></svg>',
   zh: '<svg viewBox="0 0 24 16" xmlns="http://www.w3.org/2000/svg"><rect width="24" height="16" fill="#de2910"/><circle cx="6" cy="5" r="2" fill="#ffde00"/></svg>',
@@ -229,7 +248,10 @@ onUnmounted(() => {
             :aria-expanded="isLangOpen"
             @click="isLangOpen = !isLangOpen"
           >
-            <span class="lang-flag" v-html="languageFlags[locale]"></span>
+            <span class="lang-flag">
+              <img v-if="getFlagUrl(locale)" :src="getFlagUrl(locale)" alt="" />
+              <span v-else v-html="languageFlags[locale]"></span>
+            </span>
           </button>
           <div v-if="isLangOpen" class="lang-menu">
             <div class="lang-search">
@@ -249,7 +271,10 @@ onUnmounted(() => {
               type="button"
               @click="selectLanguage(lang.code)"
             >
-              <span class="lang-flag" v-html="languageFlags[lang.code]"></span>
+              <span class="lang-flag">
+                <img v-if="getFlagUrl(lang.code)" :src="getFlagUrl(lang.code)" alt="" />
+                <span v-else v-html="languageFlags[lang.code]"></span>
+              </span>
               <span class="lang-name">{{ lang.label }}</span>
             </button>
           </div>

src/assets/flags/am.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 24 16" xmlns="http://www.w3.org/2000/svg">
+  <rect width="24" height="5.33" fill="#ed1c24"/>
+  <rect y="5.33" width="24" height="5.33" fill="#fecd00"/>
+  <rect y="10.67" width="24" height="5.33" fill="#008000"/>
+</svg>

src/assets/flags/az.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 24 16" xmlns="http://www.w3.org/2000/svg">
+  <rect width="24" height="5.33" fill="#00b5e2"/>
+  <rect y="5.33" width="24" height="5.33" fill="#ef3340"/>
+  <rect y="10.67" width="24" height="5.33" fill="#509e2f"/>
+</svg>

src/assets/flags/fa.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 24 16" xmlns="http://www.w3.org/2000/svg">
+  <rect width="24" height="5.33" fill="#239f40"/>
+  <rect y="5.33" width="24" height="5.33" fill="#ffffff"/>
+  <rect y="10.67" width="24" height="5.33" fill="#da0000"/>
+</svg>

src/assets/flags/globe.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 24 16" xmlns="http://www.w3.org/2000/svg">
+  <rect width="24" height="16" fill="#1e90ff"/>
+  <circle cx="12" cy="8" r="5" fill="#ffffff"/>
+  <path d="M12 3 v10 M7 8 h10" stroke="#1e90ff" stroke-width="1"/>
+</svg>

src/assets/flags/he.svg

@@ -0,0 +1,6 @@
+<svg viewBox="0 0 24 16" xmlns="http://www.w3.org/2000/svg">
+  <rect width="24" height="16" fill="#ffffff"/>
+  <rect y="2" width="24" height="2" fill="#0038b8"/>
+  <rect y="12" width="24" height="2" fill="#0038b8"/>
+  <polygon points="12,5 10,9 14,9" fill="#0038b8"/>
+</svg>

src/assets/flags/hy.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 24 16" xmlns="http://www.w3.org/2000/svg">
+  <rect width="24" height="5.33" fill="#d90012"/>
+  <rect y="5.33" width="24" height="5.33" fill="#0033a0"/>
+  <rect y="10.67" width="24" height="5.33" fill="#f2a800"/>
+</svg>

src/assets/flags/id.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 24 16" xmlns="http://www.w3.org/2000/svg">
+  <rect width="24" height="8" fill="#ff0000"/>
+  <rect y="8" width="24" height="8" fill="#ffffff"/>
+</svg>

src/assets/flags/ja.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 24 16" xmlns="http://www.w3.org/2000/svg">
+  <rect width="24" height="16" fill="#ffffff"/>
+  <circle cx="12" cy="8" r="4" fill="#bc002d"/>
+</svg>

src/assets/flags/ko.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 24 16" xmlns="http://www.w3.org/2000/svg">
+  <rect width="24" height="16" fill="#ffffff"/>
+  <circle cx="12" cy="8" r="3.5" fill="#003478"/>
+  <circle cx="12" cy="8" r="2.2" fill="#c60c30"/>
+</svg>

src/assets/flags/ms.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 24 16" xmlns="http://www.w3.org/2000/svg">
+  <rect width="24" height="8" fill="#ff0000"/>
+  <rect y="8" width="24" height="8" fill="#ffffff"/>
+</svg>

src/assets/flags/sw.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 24 16" xmlns="http://www.w3.org/2000/svg">
+  <rect width="24" height="5.33" fill="#3a75c4"/>
+  <rect y="5.33" width="24" height="5.33" fill="#ffde00"/>
+  <rect y="10.67" width="24" height="5.33" fill="#3a75c4"/>
+</svg>

src/assets/flags/ta.svg

@@ -0,0 +1,6 @@
+<svg viewBox="0 0 24 16" xmlns="http://www.w3.org/2000/svg">
+  <rect width="24" height="5.33" fill="#ff9933"/>
+  <rect y="5.33" width="24" height="5.33" fill="#ffffff"/>
+  <rect y="10.67" width="24" height="5.33" fill="#128807"/>
+  <circle cx="12" cy="8" r="2" fill="#000080"/>
+</svg>

src/assets/flags/te.svg

@@ -0,0 +1,6 @@
+<svg viewBox="0 0 24 16" xmlns="http://www.w3.org/2000/svg">
+  <rect width="24" height="5.33" fill="#ff9933"/>
+  <rect y="5.33" width="24" height="5.33" fill="#ffffff"/>
+  <rect y="10.67" width="24" height="5.33" fill="#128807"/>
+  <circle cx="12" cy="8" r="2" fill="#000080"/>
+</svg>

src/assets/flags/th.svg

@@ -0,0 +1,7 @@
+<svg viewBox="0 0 24 16" xmlns="http://www.w3.org/2000/svg">
+  <rect width="24" height="3" fill="#ff0000"/>
+  <rect y="3" width="24" height="2" fill="#ffffff"/>
+  <rect y="5" width="24" height="6" fill="#2e2a8c"/>
+  <rect y="11" width="24" height="2" fill="#ffffff"/>
+  <rect y="13" width="24" height="3" fill="#ff0000"/>
+</svg>

src/assets/flags/tl.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 24 16" xmlns="http://www.w3.org/2000/svg">
+  <rect width="24" height="8" fill="#0038a8"/>
+  <rect y="8" width="24" height="8" fill="#ce1126"/>
+  <polygon points="0,8 8,0 8,16" fill="#fcd116"/>
+</svg>

src/assets/flags/tl_placeholder.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 24 16" xmlns="http://www.w3.org/2000/svg">
+  <rect width="24" height="16" fill="#cccccc"/>
+  <text x="12" y="10" font-size="6" text-anchor="middle" fill="#666">TL</text>
+</svg>

src/assets/flags/uz.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 24 16" xmlns="http://www.w3.org/2000/svg">
+  <rect width="24" height="5.33" fill="#1eb53a"/>
+  <rect y="5.33" width="24" height="5.33" fill="#ffffff"/>
+  <rect y="10.67" width="24" height="5.33" fill="#0099b5"/>
+</svg>

src/assets/flags/vi.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 24 16" xmlns="http://www.w3.org/2000/svg">
+  <rect width="24" height="16" fill="#da251d"/>
+  <polygon points="12,4.5 13.2,8 16.9,8 13.9,10 15.1,13.5 12,11.5 8.9,13.5 10.1,10 7.1,8 10.8,8" fill="#ffdd00"/>
+</svg>