Flag icons

Why icons

flag(code) from tinyval-mask gives a flag emoji — that's zero bytes, but Windows shows two letters (RU) instead of flag emoji. SVG icons look the same everywhere. The package contains flags of 257 countries and territories in 3:2 proportion (from country-flag-icons, MIT).

You don't have to use the flags together with tinyval-phone masks — they work with tinyval-mask too: the country code is the same (country.code).

As markup: loadFlag

loadFlag(code) returns SVG markup. Each flag is a separate module: the bundler (Vite, webpack, esbuild) puts them into separate files, and the browser loads only the flags that are shown.

<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>

As a file: <img>

The SVG files themselves are in the package: tinyval-phone/flags/<code>.svg. The bundler turns an import into a file URL:

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="" />

List of all flags

flagCodes() — the codes of countries that have a flag: handy for your own dropdown. Besides countries with dial codes it includes, for example, Antarctica (aq) and the European Union (eu).

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

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

Your own flags

To replace some flags or the whole set — setFlags; npx tinyval-phone flags ru kz creates a file to edit. Details — Your own countries & flags.