アイコンは下記6ライブラリが用意されており、それぞれの見栄えや名前などについてはサイト内で一覧化されているので、そちらで確認することができます。
- Entypo
- Feather
- Font Awesome
- Material
- Octicons
- Simple
使用する際は下記のようなURLをimgやbackgroundで指定していきます。
https://icongram.jgog.in/{library name}/{icon}.svg?[options]
ハイライト表示している箇所は任意で変更する部分になっており、それぞれ下記のようなルールで指定していきます。
- library name
- 上で挙げた6ライブラリの中から使用するライブラリ名を指定します。
例えば、「Entypo」を使いたいならentypo、「Font Awesome」を使いたならfontawesomeといったようにすべて小文字で指定します。 - icon
- 使用したいアイコン名を指定します。
サイト内で各ライブラリ毎のページにアイコンが一覧化されているので、そこで確認することができます。 - options
- ここではサイズとカラーの指定ができ、どちらも未指定（記述をしない）の場合はサイズが32pxで、カラーは
#000000がデフォルト値となります。
サイズは最大500pxまで指定が可能となっており、カラー指定はHexの6桁で指定する必要があります。
指定する際は例えばサイズであれば?size=32のような形で指定し、さらにカラーも同時に指定したい場合は?size=32&color=ff0000といったように&で繋げて指定をします。
また、「Simple」のみのオプションとしてcoloredというのがあり、これを使用した場合はそのアイコンのブランドカラーを自動で指定してくれます。
実際に使用すると以下のようなアイコンを表示することができます。
※左から「Feather - droplet」「Font Awesome - heart」「Material - cat」
<!-- Feather - droplet -->
<img src="https://icongram.jgog.in/feather/droplet.svg?size=64&color=3498db">
<!-- Font Awesome - heart -->
<img src="https://icongram.jgog.in/fontawesome/heart.svg?size=64&color=e74c3c">
<!-- Material - cat -->
<img src="https://icongram.jgog.in/material/cat.svg?size=64&color=e67e22">
そのまま案件とかで使うのはあれですが、よく利用されるものはひと通り揃っている点も嬉しいですし、ちょっとしたテストとかで一時的に利用したい場面などでは手軽に使えて便利だと思います。