Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
54
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

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

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

①色が違うだけのアイコンをpngなどで1つ1つ画像を書き出す
②しかも、それぞれスマートフォンサイト用に@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アイコンの色を変更する方法

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
54
Help us understand the problem. What are the problem?