npm installで使える国旗アイコンセット

Node.js のアプリケーション内で、国旗の画像を使うことになった。

画像を用意するのが面倒だったので、 npm install して使える国旗のアイコンセットがないか調べたのでメモ。

2022年6月からダウンロード数が急増し、おそらく現在最もダウンロードされている国旗アイコンセット。ライセンスはMIT。著名なパッケージから依存されたのかな?

CSSを読み込み、クラス名として fi fi-<国> を指定する。

import '/node_modules/flag-icons/css/flag-icons.min.css'

<span class="fi fi-us"></span>

ソースコードのホスト先がGitLabなので、Starは少ないが、安定的にダウンロード数が多い国旗アイコンセット。ライセンスはMIT。

READMEに記載があるが、過去にGitHubアカウントが停止されたことがある模様。Starが少ないのはそれも原因か。

Reactの場合、国ごとに import して使用する。

import { US } from 'country-flag-icons/react/3x2'

<US title="United States" className="..." />

country-flag-iconsのREADMEからリンクされていた。

FlagKitのnpmパッケージ版。ライセンスはMIT。

flag-icons と同じように、クラス名として fp および国を指定する。

<span class="fp us"></span>

Iconifyで利用可能なアイコンセットに、国旗アイコンが含まれている。

Iconify自体のライセンスはISC。利用するアイコンセットごとにライセンスが異なるが、例えば Maps / Flags のFlag IconsはMITライセンスだった。

他のアイコンと同様、アイコンを文字列で指定する。

import { Icon } from '@iconify/react'

<Icon icon="flag:us-4x3" />

クラス名で国を指定するタイプは、CSSライブラリとしてTailwindCSSを使っており、あまりクラス名を追加したくなかったため見送り。

残るcountry-flag-iconsとIconifyについてはどちらでもよかったが、すでにIconifyを使用していたため、そのまま使うことにした。

SVGおよびPNGのアイコンセット。ライセンスが明記されていなかったので見送り。

電話番号の国番号(日本なら+81)の選択に使えるパッケージ。国旗と国番号を表示できる模様。

ユースケースに合わなかったので見送ったが、機会があれば使ってみたい。

昔はアイコンセットをダウンロードして展開していたが、楽になったなぁ...

ダウンロード数の比較はこちら。flag-iconsの伸びは何が原因なんだろう?