Иконки флагов

Зачем иконки

flag(code) из tinyval-mask даёт флаг-эмодзи — это ноль байт, но Windows вместо флагов-эмодзи показывает две буквы (RU). Иконки в SVG выглядят одинаково везде. В пакете — флаги 257 стран и территорий в пропорции 3:2 (из country-flag-icons, MIT).

Флаги не обязательно брать вместе с масками tinyval-phone — они подходят и к tinyval-mask: код страны тот же (country.code).

Разметкой: loadFlag

loadFlag(code) возвращает SVG-разметку. Каждый флаг — отдельный модуль: сборщик (Vite, webpack, esbuild) выносит их в отдельные файлы, и браузер загружает только показанные флаги.

<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import { phoneAuto } from 'tinyval-phone';
import { loadFlag } from 'tinyval-phone/flags';
import { vMask } from 'tinyval-mask/vue';

const phoneMask = phoneAuto({ defaultCountry: 'ru' });
const tel = ref('');
const code = computed(() => phoneMask.country(tel.value)?.code);
const svg = ref<string>();
watch(code, async (c) => (svg.value = c ? await loadFlag(c) : undefined), { immediate: true });
</script>

<template>
  <span class="flag" v-html="svg" />
  <input v-model="tel" v-mask.raw="phoneMask" inputmode="tel" />
</template>

<style scoped>
.flag { display: inline-flex; width: 24px; height: 16px; }
.flag :deep(svg) { width: 100%; height: 100%; }
</style>

Файлом: <img>

Сами SVG лежат в пакете: tinyval-phone/flags/<код>.svg. Сборщик превратит импорт в адрес файла:

import ru from 'tinyval-phone/flags/ru.svg'; // '/assets/ru-3f2a1c.svg'

<img src="/node_modules/tinyval-phone/flags/ru.svg" width="24" height="16" alt="" />

Список всех флагов

flagCodes() — коды стран, для которых есть флаг: удобно для своего выпадающего списка. Кроме стран с телефонными кодами там есть, например, Антарктида (aq) и Европейский союз (eu).

import { flagCodes } from 'tinyval-phone/flags';

flagCodes().length;         // 257
flagCodes().includes('eu'); // true

Свои флаги

Заменить отдельные флаги или весь набор — setFlags, файл для правки создаёт npx tinyval-phone flags ru kz. Подробно — Свои страны и флаги.