FontAweosomeは本当に便利。
でも使ってるのって結局SNSのアイコンだけだったので、自分で画像を用意することにしました。

PC版で画面左端にそっと出て来る、SNSシェアボタン。
これをsvgにします。hoverさせたときに色を変えたい。

cssでアニメーションや色を変えたりができるsvg

svgならばfill属性によって色を変えられるので、cssでhoverやアニメーションが簡単に実装できるのが◎。
FontAwesomeみたいに、色を変えたり、出したいところに出したり。
サイズを変えてもガジガジしません。

でも、imgタグでsvgを読み込むとアニメーションしたり色を変えたりできないんです。普通の画像と同じじゃないか。

そこで、インラインで書くことにしたのですが・・
インラインで書いてしまうといろんなファイルに直書きすることになり、ソースが長くなってしまうのがちょっと。
管理が大変そうなんですよね。どうしよう。

メンテナンス性を考えて、一箇所にまとめたい

ヘッダやフッタなどの共通パーツは別ファイルに分離して読み込む、ということをしています。
なにか変えたいときは、１ファイルだけを更新。管理面で効率が良い！
svgファイルも、この方法でなんとかしたい。

同じsvg画像を使い回したい

というわけで、svgファイルもインクルードすることにしました。
1度svgタグを定義しておけば、表示させたいところで使い回しできるようになります。

作るときの作業はちょっとめんどくさい！ですが、ファイルを分けておくことで、後々の管理は楽になります。この一手間で、場所によって色や動きも変えられるし、こちらの方が便利かな。

実装

やることがたくさん・・ざっくり分けると３つの作業です。順を追ってひとつずつ。

やることリスト

1. svgファイルを作成する。これが呼び出し元。
2. svgファイルをインクルード
3. 呼び出したいファイルにuseタグを記述

svgファイルを作成します。不要なものは削除して綺麗にします。このファイルが呼び出し元となります。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="svg-icon">
 <!-- FACEBOOK -->
 <symbol id="icon-facebook" viewBox="0 0 32 32">
  <g id="icon-facebook">
   <path d="M19 6h5v-6h-5c-3.86 0-7 3.14-7 7v3h-4v6h4v16h6v-16h5l1-6h-6v-3c0-0.542 0.458-1 1-1z"></path>
  </g>
 </symbol>
</svg>

呼び出すときのためにidを付与。
svgファイルを読み込んでいる箇所に余白ができてしまうので、svgタグにsvg-iconというクラスをつけ、cssでdisplay:noneにしています。

次。svgファイルをインクルードします。呼び出したいファイルのソースはこんな感じです。

<svg class="flownavi-icon-facebook" x="0" y="0">
 <use x="0" y="0" xlink:href="#icon-facebook"></use>
</svg>

参考にさせていただいた記事

すごくわかりやすかったです！勉強になった。ありがとうございました・・！

• SNSシェアボタンのUIデザイン改善メモ
• SVGをuseタグで使いまわす
• symbolタグとuseタグを使って、好きなところにSVGを表示しよう！

SNSボタンで使っているsvg画像は、こちらを使わせていただいてます。

IcoMoon