国旗アイコンを簡単に使えるCSSライブラリ「flag-icons」が超便利だった

schedule Published
published_with_changes Updated
Category folderJumble
format_list_bulleted Contents

前に書いた記事で、国旗アイコンを使った時に超便利だったのでメモしておきます。
flag-iconsの本家はこちらopen_in_new

CloudFlareのcdnjsでも提供されているので、CDNで簡単に導入する方法を書いています。

CDNで導入

CloudFlareのcdnjsから読み込んで使用します。

cdnjsとは?

CloudFlareという会社が提供している無料のオープンソースCDNサービスで、GitHubに公開されているJavaScriptライブラリやCSSライブラリを配信*しています。

気になるライブラリがあれば、cdnjsサイトで検索して配信URLを見つけられます。
*2021.10.29時点で4,075のライブラリを配信

cdnjs
cdnjs.comopen_in_new

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-iconflag-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-iconflag-icon-backgroundに変更すると、疑似要素ではなく背景として利用できます。

<div class="flag-icon-background flag-icon-jp"> </div>

おわりに

CDNの導入は簡単ですが、cdnjsのサービスが停止したり、利用しているライブラリの配信が中止になったりした場合は導入しているサイトで使用できなくなる可能性があります。CDNなので自前のサーバーに置くよりメリットがあり、滅多な事で停止したりしないと思いますが。。
心配で気になる方は本家のGitHubからインストール or ダウンロードして利用しましょう。