Webデザインで使えるWebアイコンのCDNサービス「icongram」



Webページでライブラリ本体の読み込み無しに、Webアイコン利用することが出来る CDNサービス「icongram」の紹介です。

 ページでWebアイコンを使うことは、今や珍しいことではありません。多くのサイトで ' font-awesome ' や ' material design icons ' などを使ったページを見かけることも多いと思います。

 Webアイコンは便利ですが、一長一短があり、" このWebアイコンライブラリ内の アイコン一種類だけを使いたい " という場合もライブラリ全体を読み込む必要があり、cssやjsを Webpackなどでバンドル化してる場合などでは コンパイルし直す必要があります。

そういった、部分的な場面でWebアイコンを手軽に使いたい時に便利な CDN サービスが「icongram」です。
 

icongram で出来ること 

- アイコンライブラリ本体の読み込みなしに、URLを通してWebアイコン(1個単位で)を使うことができます

* Webページ上で複数のWebアイコンをライブラリ無しに手軽に使うことが出来ます


icongram に対応しているアイコン 

 icongramは font-awesome を始め、9種類のアイコンライブラリに対応しています。それらのアイコン ( 計 5114個 ) は CDN ( URL ) を通して使用することができます。

Clarity Icons ( 299種類 ) 

* Clarity Icons 


Devicon ( 232種類 )

Devicon はプログラミング言語のロゴや、オープンソースプロジェクト、有名ライブラリのロゴが揃ったアイコンセット集です。

* Devicon 


Entypo ( 411種類 )

* Entypo


Feather Icon ( 263種類 )

* Feather Icon


Font-Awesome ( 783種類 )

* font-awesome


Jam Icons ( 422種類 )

* Jam Icons


Material Design Icons ( 2119種類 )

* Material Design Icons


Octicons ( 171種類 )

* octicons


Simple Icons ( 406種類 )

 Simple Iconsは IT系のカンパニーロゴ、アプリケーションロゴ、サービスロゴなどが集まったアイコンセットです。
* 当サイトのソーシャルシェアボタン内の ' Pocket ', ' はてなブックマーク ' のロゴは Simple Iconsに用意されているアイコンを使用しています

* simple icons


icongram の使い方

 通常、アイコンを 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" />

* icongramの公式ページのスクショ


Clarity Icons

<!--
https://icongr.am/clarity/アイコン名.svg?size=サイズ&color=カラー
-->
<img src="https://icongr.am/clarity/home.svg?size=30&color=1fcdaf" />


Devicon

* deviconのアイコンには全て色が付いています。

<!--
https://icongr.am/devicon/アイコン名.svg?size=サイズ
-->
<img src="https://icongr.am/devicon/rails-plain-wordmark.svg" />


Entypo

<!--
https://icongr.am/entypo/アイコン名.svg?size=サイズ&color=色
-->
<img src="https://icongr.am/entypo/cake.svg?size=65&color=1fcdaf" />


Feather-Icon

<!--
https://icongr.am/feather/アイコン名.svg?size=サイズ&color=色
-->
<img src="https://icongr.am/feather/activity.svg?size=65&color=1fcdaf" />


Font Awesome

<!--
https://icongr.am/fontawesome/アイコン名.svg?size=サイズ&color=色
-->
<img src="https://icongr.am/fontawesome/briefcase.svg?size=65&color=1fcdaf" />


Jam Icons

<!--
https://icongr.am/jam/アイコン名.svg?size=サイズ&color=色
-->
<img src="https://icongr.am/jam/soccer.svg?size=65&color=1fcdaf" />


Material Design Icons

<!--
https://icongr.am/material/アイコン名.svg?size=サイズ&color=色
-->
<img src="https://icongr.am/material/access-point.svg?size=65&color=1fcdaf" />


Octicons

<!--
https://icongr.am/octicons/アイコン名.svg?size=サイズ&color=色
-->
<img src="https://icongr.am/octicons/file-pdf.svg?size=65&color=1fcdaf" />


Simple Icons

<!--
https://icongr.am/simple/アイコン名.svg?size=サイズ&color=色
-->
<img src="https://icongr.am/simple/gravatar.svg?size=65&color=1fcdaf" />

 

markdown上で使う場合

icongram は SVGファイルを呼び出しているだけなので、 Markdownドキュメント上でも問題なく使うことが出来ます。

<!-- Markdown上から icongramのアイコンを呼び出す  -->
![altテキスト](https://icongr.am/octicons/markdown.svg)

* markdownドキュメント上から icongram の使用
( Atomエディタの Markdown Preview を使用しています)
 


Summary

icongram のサービスを少し利用してみて、以下のケースで使用すると便利だと感じました。

- 開発時にアイコンライブラリ選定するとき
- 開発時にページ内アイコンのサイズ調整時
- " 使いたいアイコンがライブラリ内の1つだけ " など、限定的なとき
- Markdownドキュメント内のワンポイントとして

icongramは多くのアイコンライブラリが利用出来るので、部分的に使えば役立つ場面も多いと思います。

また、デベロッパーのかたは、普段書いているMarkdownドキュメントの ' README.md ' ファイルを少し華やかに彩れそうです。

icongram : 公式ページ / GitHubレポジトリ

 

この記事のカテゴリ
プログラミング

この記事に付けられているタグ