關於我與前端無關緊要的分享 Day 25

各種 Icon 採用方案中，我最喜歡的莫過於 SVG了。有最大的控制彈性，可以改顏色、可以改大小、可以改細節、可以加動畫。完全不需要像是過去使用 Font Icon 還要去重新打包發布字型，就可以在 runtime 做到改變。

也許會有人說，url 內部的資源怎麼改？

其實我採用的是把 SVG 的文字讀出來直接 mount 到 html 上，就跟 DOM 操作一樣。

也許有人會說，SVG 怎麼可以改顏色？

其實可以，真的要利用 CSS 的 currentColor 的特性，直接就可以控制顏色。把向量上的 stroke color 或是 fill 改成 currentColor 就可以控制。

也許有人會說，SVG 高度寬度還要手動設定。

其實可以在 SVG 上 設定 width, height 的數值為 em，透過比例和 font size 就可以繼承大小。

也許有人會說，樣式修改我用 CSS 就可以控制了，為什麼要用 SVG？

因為 SVG 的控制能力更強大，很多 CSS 還沒發佈的渲染功能都可以在 SVG 的渲染引擎找到對應的語法。包含 Liquid Glass 的玻璃折射渲染，也都可以找到解決方法。

也許有人會說，動畫我用 CSS 就可以控制了，為什麼要用 SVG？

因為 SVG 可以做到向量軌跡動畫，可以做更加絢麗的效果。也可以向量變形動畫，達到一般 html 無法呈現的變化。

現在 AI 加持的今天，這些靜態效果並不難寫，但可以產生的便利也非常多。我也必須承認這沒辦法 100% 取代字型 Icon 能做到的事情，比如說漸層色，它需要採用更侵入的做法，卻也不是完全做不到。