CDNで導入
CloudFlareのcdnjsから読み込んで使用します。
cdnjsとは？
CloudFlareという会社が提供している無料のオープンソースCDNサービスで、GitHubに公開されているJavaScriptライブラリやCSSライブラリを配信*しています。
気になるライブラリがあれば、cdnjsサイトで検索して配信URLを見つけられます。
＊2021.10.29時点で4,075のライブラリを配信
cdnjsのcssを読み込むだけで完了
<link href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/4.1.3/css/flag-icons.min.css" rel="stylesheet">
これで導入完了です。バージョンの更新など気になる方は、cdnjsで検索して確認してください。
使い方
空のspanタグやiタグで使用する
空のspanタグなどにclassでflag-iconとflag-icon-●●を付けます。●●の部分は2文字の国名コード（ISO 3166-1のalpha-2）が入ります。日本だとjp、アメリカだとusなどですね。
国名コードは本家のデモopen_in_newでも確認できます。
<span class="flag-icon flag-icon-un"></span>
<span class="flag-icon flag-icon-eu"></span>
<span class="flag-icon flag-icon-jp"></span>
<span class="flag-icon flag-icon-bd"></span>
これだけで簡単にSVGのきれいな国旗が表示できます。国旗だけでなく、国連の旗や欧州旗もありました。
正方形で表示する
正方形の指定もできるようです。classにflag-icon-squaredを追加します。
<span class="flag-icon flag-icon-un flag-icon-squared"></span>
<span class="flag-icon flag-icon-eu flag-icon-squared"></span>
<span class="flag-icon flag-icon-jp flag-icon-squared"></span>
<span class="flag-icon flag-icon-bd flag-icon-squared"></span>
正方形の表示例。
背景で利用する
classのflag-iconをflag-icon-backgroundに変更すると、疑似要素ではなく背景として利用できます。
<div class="flag-icon-background flag-icon-jp"> </div>
おわりに
CDNの導入は簡単ですが、cdnjsのサービスが停止したり、利用しているライブラリの配信が中止になったりした場合は導入しているサイトで使用できなくなる可能性があります。CDNなので自前のサーバーに置くよりメリットがあり、滅多な事で停止したりしないと思いますが。。
心配で気になる方は本家のGitHubからインストール or ダウンロードして利用しましょう。