先日、同じ形のアイコンを色違いで複数のページに挿入するというタスクがあり、
①色が違うだけのアイコンをpngなどで１つ１つ画像を書き出す
②しかも、それぞれスマートフォンサイト用に＠2xサイズまで作成する
ということが非常に不毛に思えたので、
何とか使いまわし出来ないかと考え、この方法にたどり着きました。
ゴール
同じ形のアイコンを色違いで表示させる
ゴールイメージ（デモ画面）
See the Pen BMmXOO by yamaki (@yamaki0405) on CodePen.
手順
1.SVGを作成する
2.作成したSVGをHTML内にインラインで指定する
3.CSSで色を指定する
1.SVGを作成する
作成したアイコンをIllustlatorやPhotoshop（CC以降）で書き出します。
作成するのが手間という方は、フリーで配布されているSVGもたくさんあるので、そちらを使ってみるのも良いかと思います。
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に分かれるのが特徴です。
色を変えたい箇所に応じて使い分けてください。
以上です。
最後までお読みいただき、ありがとうございました。