Webデザイナーを悩ませる根深い問題の１つに、アイコンデザインがあります。
アイコンを画像のスライスで作成していくのがいいのか、Font AwesomeのようにWebフォントを利用したほうがいいのか、それともCSSスプライトで表示でしたほうがいいのか。
方法論はたくさんありますが、それぞれにメリットとデメリットを含んでいるため、どれが一番よい解決策なのか迷われている方も多いのではないでしょうか。

そこで注目を浴びているのが、SVGを使ったアイコンの表示です。
PNGやGIFで作ったアイコンと違って、SVGアイコンは高解像度でもギザギザにならず、着色も簡単です。
さらに、SVGアイコンを一番簡単に表示させる方法があります。

今回は、SVGアイコンを一番簡単に表示できる「Icongram」の使い方をご紹介します。
4,000以上のアイコンを簡単に表示することができるので、ぜひ取り入れてみてはいかがでしょうか。

SVGアイコンを一番簡単に表示できる「Icongram」

ig.jpg
スクリーンショット：2017年10月

Icongramは、SVGアイコンを非常に簡単に表示させることができるWebサービスです。
アイコン配布サイトの老舗であるIconfinder(アイコンファインダー)のスポンサーも受けており、2017年10月執筆時点で4,000以上のアイコンの中から選んで自分のホームページに簡単に表示することができます。

簡単すぎてごめんなさい！Icongramの使い方とは？

creative.jpeg
画像引用元：pexels.com

Icongramの使い方は、非常に簡単です。
Icongramで用意されている後述の7つのアイコンライブラリーの中からアイコンを選び、それをAPIとして使えるURLにして、IMGタグで呼び出すだけです。

APIのエンドポイントのURLは以下の通りです。

https://icongr.am/{library name}/{icon}.svg?[options]

上記で示されている変数は、以下の通りです。

  • library name：ライブラリの名前。clarity, entypo, feather, fontawesome, material, octicons, simpleの7つの中から選びます。
  • icon：アイコン名を指定します。
  • options：sizeで一辺の大きさをピクセル単位で指定、colorでアイコンの色を16進数の6文字で指定、coloredはsimpleライブラリでのみオリジナルの色をつけるかどうかをboolean値で指定することができます。

例えば、Font Awesomeのライブラリを使って、水色のアイコンを表示したい場合には以下のようにします。

https://icongr.am/fontawesome/heart.svg?color=44dddd

また、Simpleライブラリはオリジナルの色を塗るのに対応しているので、coloredオプションを指定することができます。

https://icongr.am/simple/youtube.svg?colored

もっともシンプルなのは、これらのURLをIMGタグで指定することですが、background-imageでURLを指定しても表示することができます。