SVGアイコンシステム利用の手順

それでは、SVGを使ったアイコンシステム構築の手順をステップごとにご紹介していくことにしましょう。
初めてSVGスプライトを使用したり、現在はアイコンフォントを使っていてSVGを使ったアイコンシステムを構築したいひとに特に役立ちます。

1. SVGの準備

アイコンシステム用のカスタムSVGを作成するには、カスタムアイコンの作成にIllustrator、Sketch、Vectrなどのプログラムを使用します。
アイコンフォントをすでに使用している場合は、サードパーティのツールを使用して、SVGスプライトを作成するためにフォントのSVG版を用意する必要があります。

vectr.jpeg

IllustratorやSketchを持っていない場合は、Vectrがオススメです。
Vectrは無料で使用することのできるベクターグラフィックソフトで、ダウンロード版だけでなくブラウザからアクセスできるオンライン版も提供されています。

export.png

VectrでSVGを作成する場合には、下記の形式で保存をしてください。

・Source：「selection」を選択
・Format：「svg」を選択
・Width：「32px」に設定

このように設定したSVGでは、ページと同じサイズの余白が含まれなくなります。

2. アイコンセットを作成

オリジナルのアイコンシステムを構築するには、既存のフォントやSVGなどのベクターグラフィックからアイコンを読み込み、アイコンシステムに変換します。
これを可能にするサービスの中でも使いやすいものの一つがFontasticというサービスです。

フォントを変換するかカスタムアイコンをアップロードする場合

すでにアイコンフォントをお持ちで、SVGフォントフォーマットに変換する必要がある場合は、オンラインフォントコンバーターというサービスで変換することができます。

2ac4c2ba.1.png
This image is via Fontastic

フォントをSVGに変換後、Fontasticでアカウントを作成して、そのフォントをFontasticにアップロードします。
既存のアイコンフォントを追加するには、右上のメニューの*「Add More Icons」*ボタンをクリックします。

同じ方法で、先ほど作成したSVGを個別アイコンとして追加することも、すでに作成した既存のセットに追加することもできます。
*「IMPORT ICONS」*ボタンをクリックして、SVGフォントまたはカスタムSVGアイコンを選択します。

既存のアイコンセットから選択する場合

Font Awesomeのような既存のアイコンライブラリからカスタムアイコンを構築することもできます。
読み込み時間を節約してパフォーマンスを向上させるには、使うぶんだけのアイコンに絞ってアイコンシステムを作成することをオススメします。
例えばサイト全体で5個しかアイコンを使用していない場合は、Font Awesomeのアイコンライブラリ全体を読み込むと表示速度が遅くなってしまいます。

3. アイコンシステムを埋め込む

3.png

アイコンシステムを作成したら、次にホームページにアイコンシステムを読み込ませます。
Fontasticを使用している場合は、SVGスプライト用に単一スニペットを生成することができます。
便利なことに、Fontastic上でフォントを入れ替えるなどして更新しても、リンクはそのまま使い続けることができるのです。

コードのスニペットは、通常のアイコンフォントと同じようにheadタグの中に埋め込みます。

4. CSSにアイコン表示用のプロパティを追加

6a26e8aa.6.jpg

アイコンが正しいサイズで表示されるように、CSSに下記のようなコードを追加します。

[class^="icon-"], [class*=" icon-"]{
　　height: 32px;
　　width: 32px;
　　display: inline-block;
　　fill: currentColor;
}

heightとwidthプロパティを指定するのは、デフォルトのアイコンサイズを制御するためです。
サイズを調整するには、値を調整するだけです。
アイコンの色を変更するには、fillプロパティを使用します。
currentColorを指定すると、親要素の色の値を引き継ぎます。

5. アイコンを使用する

あとは、*「ICONS REFERENCE」*にあるアイコンをコピー＆ペーストすれば完了です。
Fontasticでは、svgタグが表示されるので、そのまま貼り付ければうまく表示されるはずです。