From eccfdc1e974d8ff9b2730ce9add37370051266ec Mon Sep 17 00:00:00 2001
From: OpenClaw <openclaw@kronos-soulution.de>
Date: Fri, 13 Mar 2026 10:23:26 +0000
Subject: [PATCH] fix: Replace emoji flags with CDN flag images

- Use flagcdn.com for reliable flag display
- Fix double text issue on devices without emoji support
- Flags now render consistently across all devices
---
 src/components/LanguageSwitcher.vue | 14 ++++++++++++--
 src/i18n.ts                         | 14 +++++++-------
 2 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/src/components/LanguageSwitcher.vue b/src/components/LanguageSwitcher.vue
index 5edb2f9..33841db 100644
--- a/src/components/LanguageSwitcher.vue
+++ b/src/components/LanguageSwitcher.vue
@@ -36,7 +36,12 @@ if (typeof window !== 'undefined') {
       @click.stop="isOpen = !isOpen"
       :title="$t('settings.language')"
     >
-      <span class="text-lg">{{ currentLocale.flag }}</span>
+      <img 
+        :src="`https://flagcdn.com/w20/${currentLocale.flag.toLowerCase()}.png`"
+        :srcset="`https://flagcdn.com/w40/${currentLocale.flag.toLowerCase()}.png 2x`"
+        :alt="currentLocale.name"
+        class="w-5 h-auto rounded-sm"
+      >
       <span class="text-xs font-medium text-gray-600 dark:text-gray-300 uppercase">
         {{ currentLocale.code }}
       </span>
@@ -74,7 +79,12 @@ if (typeof window !== 'undefined') {
           }"
           @click="selectLocale(loc.code)"
         >
-          <span class="text-lg">{{ loc.flag }}</span>
+          <img 
+            :src="`https://flagcdn.com/w20/${loc.flag.toLowerCase()}.png`"
+            :srcset="`https://flagcdn.com/w40/${loc.flag.toLowerCase()}.png 2x`"
+            :alt="loc.name"
+            class="w-5 h-auto rounded-sm"
+          >
           <span class="flex-1 text-left">{{ loc.name }}</span>
           <svg
             v-if="loc.code === locale"
diff --git a/src/i18n.ts b/src/i18n.ts
index 78edbd1..bf40999 100644
--- a/src/i18n.ts
+++ b/src/i18n.ts
@@ -8,13 +8,13 @@ import ru from './locales/ru'
 import pl from './locales/pl'
 
 export const SUPPORTED_LOCALES = [
-  { code: 'de', name: 'Deutsch', flag: '🇩🇪' },
-  { code: 'es', name: 'Español', flag: '🇪🇸' },
-  { code: 'en', name: 'English', flag: '🇬🇧' },
-  { code: 'ar', name: 'العربية', flag: '🇸🇦', rtl: true },
-  { code: 'ru', name: 'Русский', flag: '🇷🇺' },
-  { code: 'fr', name: 'Français', flag: '🇫🇷' },
-  { code: 'pl', name: 'Polski', flag: '🇵🇱' },
+  { code: 'de', name: 'Deutsch', flag: 'DE' },
+  { code: 'es', name: 'Español', flag: 'ES' },
+  { code: 'en', name: 'English', flag: 'GB' },
+  { code: 'ar', name: 'العربية', flag: 'SA', rtl: true },
+  { code: 'ru', name: 'Русский', flag: 'RU' },
+  { code: 'fr', name: 'Français', flag: 'FR' },
+  { code: 'pl', name: 'Polski', flag: 'PL' },
 ] as const
 
 export type LocaleCode = typeof SUPPORTED_LOCALES[number]['code']