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
This commit is contained in:
2026-03-13 10:23:26 +00:00
parent 9d8b00d9c9
commit eccfdc1e97
2 changed files with 19 additions and 9 deletions

View File

@@ -36,7 +36,12 @@ if (typeof window !== 'undefined') {
@click.stop="isOpen = !isOpen" @click.stop="isOpen = !isOpen"
:title="$t('settings.language')" :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"> <span class="text-xs font-medium text-gray-600 dark:text-gray-300 uppercase">
{{ currentLocale.code }} {{ currentLocale.code }}
</span> </span>
@@ -74,7 +79,12 @@ if (typeof window !== 'undefined') {
}" }"
@click="selectLocale(loc.code)" @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> <span class="flex-1 text-left">{{ loc.name }}</span>
<svg <svg
v-if="loc.code === locale" v-if="loc.code === locale"

View File

@@ -8,13 +8,13 @@ import ru from './locales/ru'
import pl from './locales/pl' import pl from './locales/pl'
export const SUPPORTED_LOCALES = [ export const SUPPORTED_LOCALES = [
{ code: 'de', name: 'Deutsch', flag: '🇩🇪' }, { code: 'de', name: 'Deutsch', flag: 'DE' },
{ code: 'es', name: 'Español', flag: '🇪🇸' }, { code: 'es', name: 'Español', flag: 'ES' },
{ code: 'en', name: 'English', flag: '🇬🇧' }, { code: 'en', name: 'English', flag: 'GB' },
{ code: 'ar', name: 'العربية', flag: '🇸🇦', rtl: true }, { code: 'ar', name: 'العربية', flag: 'SA', rtl: true },
{ code: 'ru', name: 'Русский', flag: '🇷🇺' }, { code: 'ru', name: 'Русский', flag: 'RU' },
{ code: 'fr', name: 'Français', flag: '🇫🇷' }, { code: 'fr', name: 'Français', flag: 'FR' },
{ code: 'pl', name: 'Polski', flag: '🇵🇱' }, { code: 'pl', name: 'Polski', flag: 'PL' },
] as const ] as const
export type LocaleCode = typeof SUPPORTED_LOCALES[number]['code'] export type LocaleCode = typeof SUPPORTED_LOCALES[number]['code']