loadFlag

An SVG flag icon by country code. Module tinyval-phone/flags.

Signature

function loadFlag(code: string): Promise<string | undefined>
function flagCodes(): string[]
function setFlags(flags: Record<string, FlagSource> | ((code: string) => string | undefined | Promise<string | undefined>)): void
function resetFlags(): void

type FlagSource = string | (() => string | undefined | Promise<string | undefined>) | null

Notes

• Returns SVG markup ('<svg …>'); undefined for an unknown code. The case doesn't matter: 'RU' and 'ru'.
• Each flag is a separate module, so the function is async: a flag is loaded on first use. The loader itself is ~3 kB gzip, a flag is 150 bytes to 1 kB.
• Flags are 3:2, viewBox="0 0 513 342". The size is set with CSS.
• Need a file, not markup — tinyval-phone/flags/<code>.svg, see Flag icons.
• setFlags replaces flags: an object by code (null — no flag) or a function for all. A flag by code wins over the function; if the function returns undefined — the built-in flag. See Your own countries & flags.

Examples

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

const el = document.querySelector('.flag')!;
el.innerHTML = (await loadFlag('jp')) ?? '';

await loadFlag('zz');  // undefined
flagCodes().length;    // 257

See also

• Flag icons — in Vue, as a file in <img>
• phoneAuto — country(value).code for the flag