效能
本頁說明套件如何影響打包大小和執行成本，以及如何渲染大量圖示。
圖示如何載入和執行
- 每個圖示一個模組。圖示模組沒有副作用，因此打包工具會移除未匯入的圖示。壓縮並經 gzip 處理後，第一個 React 或 Vue 圖示約增加 4 KB（含共用執行環境），之後每個圖示約 0.6 KB。
- 預先渲染的標記。靜止狀態以字串形式提供，無論在伺服器或瀏覽器上，首次繪製前都不需要額外計算。
- 按需執行動態。動態程式碼只在圖示移動時執行，動態結束後即停止。
- 共用程式碼。所有圖示共用一個幾何模組，所有動態圖示共用一個執行環境，因此瀏覽器和 CDN 只需快取一次。
- CSS 顏色。變更整頁圖示的顏色只需修改一處 CSS，不會重新渲染圖示。
大量圖示
每個圖示都使用 SVG 濾鏡製作陰影和高光。若要顯示數百個圖示，請只渲染可見的列，或在 <img> 標籤中使用靜態 SVG 檔案，瀏覽器只需點陣化一次。
深層匯入
開發伺服器常會載入整個套件索引，而索引參照了每一個圖示。若要避免，請從各圖示自己的檔案匯入：
ts
import Folder from "kubai-icons-react/icons/folder";