一秒使用 CSS 控制 SVG 顏色

SVG 最常使用在 ICON 的圖檔格式，通常一個 ICON 可能會根據不同的使用情境需要多種色彩，導致明明是同一個 ICON 卻有好多檔案：

如果可以用 CSS 去控制 ICON 的顏色， 就不需要這麼多檔案了，此篇就是要來講當你從設計 or 切版拿到 Icon 時要如何將 SVG 調整成可以用 CSS 控制顏色～

以 Figma 設計稿作為範例說明，首先你拿到的設計稿可能是這樣子的：

設計稿源自 2021前端時光精神作品(鹽酥G)

將 Icon 下載後打開檔案

Step1. 先將原本的顏色移除：fill="#283C43"

Step2. SVG Tag 加上 fill="currentColor"，就大功告成了～

補充說明：

如果你發現拿到的 svg 檔中有 stroke 這個 attribute，可以跟設計師協調將 ICON 轉外框並使用複合路徑，這樣就可以得到乾淨的 SVG 檔囉