SVGアイコンの色をCSSで変更する

先日、同じ形のアイコンを色違いで複数のページに挿入するというタスクがあり、

①色が違うだけのアイコンをpngなどで１つ１つ画像を書き出す
②しかも、それぞれスマートフォンサイト用に＠2xサイズまで作成する

ということが非常に不毛に思えたので、
何とか使いまわし出来ないかと考え、この方法にたどり着きました。

##ゴール
同じ形のアイコンを色違いで表示させる

###ゴールイメージ（デモ画面）

See the Pen BMmXOO by yamaki (@yamaki0405) on CodePen.

##手順
1.SVGを作成する
2.作成したSVGをHTML内にインラインで指定する
3.CSSで色を指定する

##1.SVGを作成する
作成したアイコンをIllustlatorやPhotoshop（CC以降）で書き出します。

作成するのが手間という方は、フリーで配布されているSVGもたくさんあるので、そちらを使ってみるのも良いかと思います。

・icooon-mono（無料アイコンサイト）

##2.作成したSVGをHTML内にインラインで指定する

demo.html

<div class="icon1">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64">
  <title>icon</title>
  <g class="path01">
    <path d="M29.996 4c0.001 0.001 0.003 0.002 0.004 0.004v23.993c-0.001 0.001-0.002 0.003-0.004 0.004h-27.993c-0.001-0.001-0.003-0.002-0.004-0.004v-23.993c0.001-0.001 0.002-0.003 0.004-0.004h27.993zM30 2h-28c-1.1 0-2 0.9-2 2v24c0 1.1 0.9 2 2 2h28c1.1 0 2-0.9 2-2v-24c0-1.1-0.9-2-2-2v0z"></path>
  </g>
  <g class="path02">
    <path d="M26 9c0 1.657-1.343 3-3 3s-3-1.343-3-3 1.343-3 3-3 3 1.343 3 3z"></path>
  </g>
  <g class="path03">
    <path d="M28 26h-24v-4l7-12 8 10h2l7-6z"></path>
  </g>
  </svg>
</div>

##3.CSSで色を指定する

demo.css

.icon1 {
  fill: #42AFE3;
}

SVGの塗りは、枠線を塗るstrokeと内部を塗るfillに分かれるのが特徴です。
色を変えたい箇所に応じて使い分けてください。

以上です。
最後までお読みいただき、ありがとうございました。

##今回、作業するにあたってお世話になったサイト
・SVG画像をCSSで色指定してcolorが効かないときの対処法
・[CSS]SVGアイコンの色を変更する方法