性能
本页说明这些软件包对打包体积和运行开销的影响,以及如何渲染大量图标
图标的加载与运行
- 每个图标一个模块。图标模块没有副作用,打包工具会移除未导入的图标。
- 预渲染的SVG 代码。静止状态以字符串形式发布,无论在服务器还是浏览器中,首次绘制前都无需计算。
- 按需运行动效。动效代码只在图标运动时运行,动效结束即停止。
- 共享代码。所有图标共用一个几何模块,所有动态图标共用一个运行时,因此浏览器和 CDN 只需缓存一份。
- 用 CSS 控制颜色。更改整页图标的颜色只需改动一处 CSS,图标不会重新渲染。
大量图标
每个图标都使用 SVG 滤镜生成阴影和高光。如果要展示数百个图标,请只渲染可见的行,或者在 <img> 标签中使用静态 SVG 文件,浏览器只需将其光栅化一次。
深层导入
开发服务器通常会加载整个包的入口文件,而入口文件引用了所有图标。为避免此情况,请从各图标自身的文件导入:
ts
import Folder from "kubai-icons-react/icons/folder";