Rendimiento
Esta página describe cómo afectan los paquetes al tamaño del bundle y al coste en tiempo de ejecución, y cómo renderizar muchos iconos.
Cómo se cargan y se ejecutan los iconos
- Un módulo por icono. Los módulos de iconos no tienen efectos secundarios, así que los empaquetadores eliminan los iconos que no importas. Minificado y comprimido con gzip, el primer icono de React o Vue añade unos 4 KB, incluido el entorno de ejecución compartido, y cada icono adicional unos 0,6 KB.
- Marcado prerrenderizado. La pose de reposo se entrega como cadena de texto, así que no requiere cálculos antes del primer pintado, ni en el servidor ni en el navegador.
- Movimiento bajo demanda. El código del movimiento solo se ejecuta mientras un icono se mueve y se detiene cuando termina.
- Código compartido. Todos los iconos comparten un módulo de geometría y todos los iconos animados comparten un único runtime, de modo que los navegadores y las CDN almacenan ese código en caché una sola vez.
- Colores con CSS. Cambiar el color de una página de iconos es un único cambio de CSS y no los vuelve a renderizar.
Conjuntos grandes de iconos
Cada icono usa filtros SVG para su sombra y su brillo. Si muestras cientos de iconos, renderiza solo las filas visibles o usa los archivos SVG estáticos en etiquetas <img>, que el navegador rasteriza una sola vez.
Importaciones directas
Los servidores de desarrollo suelen cargar todo el índice del paquete, que hace referencia a todos los iconos. Para evitarlo, importa cada icono desde su propio archivo:
ts
import Folder from "kubai-icons-react/icons/folder";