国旗图标

为什么需要图标

tinyval-mask 中的 flag(code) 提供国旗表情 —— 不占任何体积，但 Windows 会显示两个字母（RU）而不是国旗表情。SVG 图标在任何地方看起来都一样。本包包含 257 个国家和地区的国旗，比例为 3:2（来自 country-flag-icons，MIT 许可）。

国旗不一定要和 tinyval-phone 的掩码一起使用 —— 它们同样适用于 tinyval-mask：国家代码相同（country.code）。

作为标记：loadFlag

loadFlag(code) 返回 SVG 标记。每个国旗都是独立的模块：打包工具（Vite、webpack、esbuild）会把它们拆分成单独的文件，浏览器只加载显示出来的国旗。

vue

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

html

<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 会创建一个可编辑的文件。详见自定义国家和国旗。

国旗图标 ​

为什么需要图标 ​

作为标记：loadFlag ​

作为文件：<img> ​