flag icons

旗のアイコン

SVG で作成されたすべての国旗の厳選されたコレクション。さらに、統合を容易にするための CSS も含まれています。デモをご覧ください。

インストール

プロジェクト全体をそのままダウンロードすることも、npm または Yarn 経由でインストールすることもできます。

npm install flag-icons
# or
yarn add flag-icons

使用法

まず、CSS をインポートする必要があります。

 import "/node_modules/flag-icons/css/flag-icons.min.css" ;

または CDN を使用します。

 < link
  rel =" stylesheet "
  href =" https://cdn.jsdelivr.net/gh/lipis/[email protected]/css/flag-icons.min.css "
/>

テキストとともにフラグをインラインで使用するには、クラス.fiおよび.fi-xx ( xxは国の ISO 3166-1-alpha-2 コード) を空の<span>に追加します。正方形のバージョン フラグが必要な場合は、クラスfisも追加します。例：

 < span class =" fi fi-gr " > </ span > < span class =" fi fi-gr fis " > </ span >

これを任意の要素に適用することもできますが、その場合はfi代わりにfib使用する必要があり、これで準備完了です。これにより、次の CSS プロパティを使用して正しい背景が追加されます。

 background-size : contain;
background-position : 50 % ;
background-repeat : no-repeat;

つまり、フラグは要素の中央に表示されるだけなので、4 x 3 の正しいサイズを手動で設定するか、正方形の場合はflag-icon-squaredクラスも追加する必要があります。

発達

プロジェクトのクローンを作成した後、 yarn実行して依存関係をインストールすると、次のことができるようになります。

*.scssファイルを構築するには

$ yarn build

localhost:8000で提供するには

$ yarn start

CSS ファイルに特定の国のみを含めるには、 _flag-icons-list.scssファイルから不要な国を削除して、再度ビルドします。

クレジット

• このプロジェクトは、koppi による素晴らしい、現在は削除されている SVG フラグのコレクションがなければ存在しなかったでしょう。
• npm でflag-icons名を提供してくださった Andrejs Abrickis に感謝します。