準備codebase的svg檔案 === 從Figma下載的icon常遇到留白的問題, 需要: * 去除留白 * svg輕量化 接著轉成data uri, 放到codebase ## 移除周圍多的padding 直接下載下來的svg或是png可能還是會有周圍留白 https://stackoverflow.com/questions/35683884/remove-whitespace-from-svg 用SVG Crop https://svgcrop.com/ ## 減少SVG尺寸 用SVG OMG https://jakearchibald.github.io/svgomg/ * [svgomg github](https://github.com/jakearchibald/svgomg) * [How to optimize and reduce the file size of SVG images](https://www.svgbackgrounds.com/how-to-optimize-and-reduce-the-file-size-of-svg-images/) ## 轉成base64 url https://base64.guru/converter/encode/image/svg ## Note SVG在JavaScript的行為說明 [How should we use SVG](https://kurtextrem.de/posts/svg-in-js)