css - css経由で単色.svgファイルの色を変更するには?

Question

以下のようなSVGアイコンを使用していますが、アイコンフォントを使用したくありません（色を変更しやすいことはすでにわかっています）

<img src="/images/ic_play_arrow_black_24px.svg">

デフォルトでは、このアイコンは黒色で、緑色に変更したいと考えています。

より少ない労力でそれを行うための最良の方法は何ですか?

矢印ファイルのURL https://storage.googleapis.com/material-icons/external-assets/v1/icons/svg/ic_play_arrow_black_24px.svg

Answer 1

ページ内の SVGを(オフページ定義用のJS ソリューションsymbolはありますが) orとして定義してdefsから、..ahem,use要素をクラスで使用できます....しかし、それは必要以上の作業になる可能性があります。

svg {
  display;
  inline-block;
  width: 24px;
}
.hidden {
  display: none;
}
.red {
  fill: red;
}
.green {
  fill: green;
}

<svg class="hidden" fill="#000000" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <g id="arrow">
      <path d="M8 5v14l11-7z" />
      <path d="M0 0h24v24H0z" fill="none" />
    </g>
  </defs>
</svg>

<svg>
  <use xlink:href="#arrow" class="red" />
</svg>

<svg>
  <use xlink:href="#arrow" class="green" />
</svg>