CSS 控制 SVG 顏色

在製作網站上面，很多時候 icon 都會使用 svg 檔案來顯示，好處就是就算是放大縮小也不需要擔心失真的問題。

通常拿到 svg 檔案時，在前端使用之前都會先進行一陣加工，像是移除空白的 group 標籤

不過最常用的就是，svg 檔案，顏色隨著 parent css 一起改變，這個時候可以將 fill 與 stroke 改為 currentColor

如此一來顏色就會隨著 css color 一起改變了。

範例

<svg fill="none" viewBox="0 0 24 24" stroke="currentColor">
  <g fill="none" fill-rule="evenodd">
    <g transform="translate(-782 -998) translate(772 985) translate(10 13) translate(3 3)">
      <circle cx="9" cy="9" r="8.5" fill="currentColor" stroke="currentColor" />
      <circle cx="9" cy="9" r="4.5" fill="#FFF" />
    </g>
  </g>
</svg>

參考資料

https://www.zhangxinxu.com/wordpress/2014/07/svg-sprites-fill-color-currentcolor/