根据国家显示国旗图标

Table of Contents

前言

项目中,要根据返回的国家名称显示对应的国旗图标。

实现思路很简单,找到对应的国旗图片,然后根据返回的国家名匹配对应的图片就可以了。

获取国旗图标

一开始,打算在网上找点相关的 Icon,有的要付费如 flaticon,而不付费的又不好看。

后来,找到了 COUNTRYFLAGS 这个网站,国旗比较齐全也美观,可以选择下载的类型和尺寸也很多。

唯一的不足是没找到批量下载的方法, 190+ 的国旗一个个下载也很费劲。

于是想,有没有更简便的方法?

无意中,看到了 Emoji ,想起来,在手机上输入 中国 的时候,会出现一个 Emoji 图标, 🇨🇳

所以是不是可以用 Emoji 实现呢?

Emoji 实现国旗图标

简单的说,Emoji 本质是一些字符,可能是多个字符组合出来。

例如中国国旗,其实是 🇨🇳 ( CN )这两个字符组合而成的。

注意这里不是我们平时使用的英文 CN ,而是 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),批量下载。

参考链接

Author: Spike Leung

Date: 2021-08-15 Sun 00:00

License: CC BY-NC 4.0