Webページでライブラリ本体の読み込み無しに、Webアイコン利用することが出来る CDNサービス「icongram」の紹介です。
ページでWebアイコンを使うことは、今や珍しいことではありません。多くのサイトで ' font-awesome ' や ' material design icons ' などを使ったページを見かけることも多いと思います。
Webアイコンは便利ですが、一長一短があり、" このWebアイコンライブラリ内の アイコン一種類だけを使いたい " という場合もライブラリ全体を読み込む必要があり、cssやjsを Webpackなどでバンドル化してる場合などでは コンパイルし直す必要があります。
そういった、部分的な場面でWebアイコンを手軽に使いたい時に便利な CDN サービスが「icongram」です。
- アイコンライブラリ本体の読み込みなしに、URLを通してWebアイコン(1個単位で)を使うことができます
icongramは font-awesome を始め、9種類のアイコンライブラリに対応しています。それらのアイコン ( 計 5114個 ) は CDN ( URL ) を通して使用することができます。
Devicon はプログラミング言語のロゴや、オープンソースプロジェクト、有名ライブラリのロゴが揃ったアイコンセット集です。
Material Design Icons ( 2119種類 )
Simple Iconsは IT系のカンパニーロゴ、アプリケーションロゴ、サービスロゴなどが集まったアイコンセットです。
* 当サイトのソーシャルシェアボタン内の ' Pocket ', ' はてなブックマーク ' のロゴは Simple Iconsに用意されているアイコンを使用しています
通常、アイコンを HTML上で呼び出す場合、' <i class="クラス名"></i> ' を使用しますが、icongramは ' <img> ' タグを使うのが特徴です。全てのアイコンはアイコンのサイズ、Devicoinを除くアイコンライブラリは色(16進数)の指定もできます。
# 基本的な呼び出し方
https://icongr.am/アイコンライブラリ/アイコン名.svg?size=サイズ&color=アイコンの色
# font-awesome 'heart'のアイコン サイズは'64px' 色は '黄緑色'
<img src="https://icongr.am/fontawesome/heart.svg?size=64&color=44dddd" />
<!--
https://icongr.am/clarity/アイコン名.svg?size=サイズ&color=カラー
-->
<img src="https://icongr.am/clarity/home.svg?size=30&color=1fcdaf" />
* deviconのアイコンには全て色が付いています。
<!--
https://icongr.am/devicon/アイコン名.svg?size=サイズ
-->
<img src="https://icongr.am/devicon/rails-plain-wordmark.svg" />
<!--
https://icongr.am/entypo/アイコン名.svg?size=サイズ&color=色
-->
<img src="https://icongr.am/entypo/cake.svg?size=65&color=1fcdaf" />
<!--
https://icongr.am/feather/アイコン名.svg?size=サイズ&color=色
-->
<img src="https://icongr.am/feather/activity.svg?size=65&color=1fcdaf" />
<!--
https://icongr.am/fontawesome/アイコン名.svg?size=サイズ&color=色
-->
<img src="https://icongr.am/fontawesome/briefcase.svg?size=65&color=1fcdaf" />
<!--
https://icongr.am/jam/アイコン名.svg?size=サイズ&color=色
-->
<img src="https://icongr.am/jam/soccer.svg?size=65&color=1fcdaf" />
<!--
https://icongr.am/material/アイコン名.svg?size=サイズ&color=色
-->
<img src="https://icongr.am/material/access-point.svg?size=65&color=1fcdaf" />
<!--
https://icongr.am/octicons/アイコン名.svg?size=サイズ&color=色
-->
<img src="https://icongr.am/octicons/file-pdf.svg?size=65&color=1fcdaf" />
<!--
https://icongr.am/simple/アイコン名.svg?size=サイズ&color=色
-->
<img src="https://icongr.am/simple/gravatar.svg?size=65&color=1fcdaf" />
icongram は SVGファイルを呼び出しているだけなので、 Markdownドキュメント上でも問題なく使うことが出来ます。
<!-- Markdown上から icongramのアイコンを呼び出す -->
( Atomエディタの Markdown Preview を使用しています)
icongram のサービスを少し利用してみて、以下のケースで使用すると便利だと感じました。
- 開発時にアイコンライブラリ選定するとき
- 開発時にページ内アイコンのサイズ調整時
- " 使いたいアイコンがライブラリ内の１つだけ " など、限定的なとき
- Markdownドキュメント内のワンポイントとして
icongramは多くのアイコンライブラリが利用出来るので、部分的に使えば役立つ場面も多いと思います。
また、デベロッパーのかたは、普段書いているMarkdownドキュメントの ' README.md ' ファイルを少し華やかに彩れそうです。
icongram : 公式ページ / GitHubレポジトリ
