import React from 'react'
/**
* 币种小国旗(纯 SVG 绘制,不使用 Emoji)
*
* 为什么不用 Emoji:🇺🇸 这类「区域指示符」在 Windows 的 Segoe UI Emoji 上
* 根本不渲染成旗子,只会显示成 US 两个字母方块;而且颜色不可控、尺寸不齐。
* 所以这里手绘 13 面旗,统一 viewBox 0 0 24 16,靠 CSS 控制大小与描边。
*
* 关于中国香港 / 中国台湾:香港用香港特别行政区区旗;台湾地区没有经
* 国家认可的区旗,这里用红底白字「台」作为**区划标识**,不是国旗。
*/
/** 五角星:单位坐标,几何中心在原点,外接圆半径 1(内接半径取 0.382) */
const STAR =
'0,-1 0.2246,-0.309 0.9511,-0.309 0.3633,0.118 0.5878,0.809 0,0.382 ' +
'-0.5878,0.809 -0.3633,0.118 -0.9511,-0.309 -0.2246,-0.309'
/** 欧元旗 12 颗星的位置(以 12,8 为中心、半径 5 的圆上均分) */
const EU_STARS = [
[17, 8], [16.33, 10.5], [14.5, 12.33], [12, 13], [9.5, 12.33], [7.67, 10.5],
[7, 8], [7.67, 5.5], [9.5, 3.67], [12, 3], [14.5, 3.67], [16.33, 5.5]
]
/** 简明国旗集:只画能一眼认出来的特征,不追求像素级还原 */
const FLAGS = {
/* 美国:13 道红白条纹 + 蓝色星区 */
USD: (
<>
{[0, 1, 2, 3, 4].map(i => )}
{[0, 1, 2, 3].map(i => )}
{[0, 1, 2, 3, 4].map(i => )}
{[0, 1, 2, 3].map(i => )}
{[0, 1, 2].map(i => )}
>
),
/* 中国:五星红旗 */
CNY: (
<>
>
),
/* 欧元区:蓝底 + 12 颗黄星围成一圈 */
EUR: (
<>
{EU_STARS.map(([x, y], i) => (
))}
>
),
/* 中国香港:香港特别行政区区旗(洋紫荆) */
HKD: (
<>
{[0, 72, 144, 216, 288].map(deg => (
))}
>
),
/* 日本:白底红日 */
JPY: (
<>
>
),
/* 俄罗斯:白蓝红三横条 */
RUB: (
<>
>
),
/* 马来西亚:红白条纹 + 蓝底黄月黄星 */
MYR: (
<>
>
),
/* 新加坡:上红下白 + 白色月与五星 */
SGD: (
<>
{[[8.6, 6.05], [6.62, 4.65], [7.37, 2.33], [9.83, 2.33], [10.58, 4.65]].map(([x, y], i) => (
))}
>
),
/* 中国台湾:台湾地区无国家认可的区旗,用红底白字「台」作区划标识 */
TWD: (
<>
台
>
),
/* 澳大利亚:蓝底 + 米字旗区 + 南十字星 */
AUD: (
<>
>
),
/* 阿联酋:左侧红竖条 + 绿白黑三横条 */
AED: (
<>
>
),
/* 沙特:绿底 + 白色清真言与宝刀(简形) */
SAR: (
<>
>
),
/* 加拿大:两侧红竖条 + 中间红枫叶 */
CAD: (
<>
>
)
}
/**
* @param {string} code ISO 4217 三字币种代码
* @param {number} width 显示宽度(px),高度按 3:2 自动算
*/
export default function CurrencyFlag({ code, width = 21 }) {
const body = FLAGS[code]
const height = Math.round((width * 16) / 24)
if (!body) {
return
}
return (
)
}