根据国家显示国旗图标
Table of Contents
前言
项目中,要根据返回的国家名称显示对应的国旗图标。
实现思路很简单,找到对应的国旗图片,然后根据返回的国家名匹配对应的图片就可以了。
获取国旗图标
一开始,打算在网上找点相关的 Icon,有的要付费如 flaticon,而不付费的又不好看。
后来,找到了 COUNTRYFLAGS 这个网站,国旗比较齐全也美观,可以选择下载的类型和尺寸也很多。
唯一的不足是没找到批量下载的方法, 190+ 的国旗一个个下载也很费劲。
于是想,有没有更简便的方法?
无意中,看到了 Emoji ,想起来,在手机上输入 中国
的时候,会出现一个 Emoji 图标, 🇨🇳
。
所以是不是可以用 Emoji 实现呢?
Emoji 实现国旗图标
简单的说,Emoji 本质是一些字符,可能是多个字符组合出来。
例如中国国旗,其实是 🇨🇳
( CN
)这两个字符组合而成的。
注意这里不是我们平时使用的英文 C
, N
,而是 Unicode 字符集里非常靠后的另外两个字符。
而为了让返回的国家和 Emoji 能够对应起来,我们需要一套规则:
CN
表示中国, DE
表示德国……,
只要得到国家的国家编号,然后找到这两个字母在 Unicode 字符集的位置,
获取可以生成 Emoji 的 Unicode 字符,然后把获取的字符渲染到页面即可。
Country Code Emoji 中的方法可以帮我们根据国家编号 (CN
) 找到其在 Unicode 中对应的位置。
Emoji 存在的问题
用 Emoji 实现国旗是很方便的,不需要下载图片,只要去找国家代码对应的 Unicode 然后进行渲染即可。
但是遗憾的是,Window 系统下,并不支持国旗的 Emoji ,就 Mac 的系统支持。
为了在不同的系统都能显示, 还是得使用 PNG 图片的形式。
最终解决方案
到 COUNTRYFLAGS 下载对应的国旗 PNG 图片,按照 ISO 3166-1 alpha-2 进行命名,然后根据国家编码去对应获取就好。
如中国( CN
)就渲染 CN.png
.
Tips
在 COUNTRYFLAGS 一张张点下载太慢了,可以写个小脚本(如 flag-download),批量下载。
参考链接
- COUNTRYFLAGS
- Using Emojis in HTML, CSS, and JavaScript
- Emojis in Javascript
- ISO 3166-1 alpha-2
- country-code-emoji
- Flag Emojis not rendering
- flag-icons">🎏 A curated collection of all country flags in SVG — plus the CSS for easier integration