Prestazioni

Questa pagina descrive come i pacchetti influiscono sulla dimensione del bundle e sul costo a runtime, e come renderizzare molte icone.

Come le icone vengono caricate ed eseguite

Un modulo per icona. I moduli delle icone non hanno effetti collaterali, quindi i bundler rimuovono le icone che non importi. Minificata e compressa con gzip, la prima icona React o Vue aggiunge circa 4 KB, incluso il runtime condiviso, e ogni icona successiva circa 0,6 KB.
Markup pre-renderizzato. Lo stato di riposo è fornito come stringa, quindi non richiede calcoli prima del primo rendering, sul server o nel browser.
Animazione su richiesta. Il codice dell'animazione viene eseguito solo mentre un'icona si muove e si ferma quando l'animazione termina.
Codice condiviso. Tutte le icone usano un solo modulo di geometria e tutte le icone animate un solo runtime, quindi browser e CDN mettono in cache quel codice una volta sola.
Colori CSS. Cambiare il colore di una pagina di icone richiede una sola modifica CSS e non le renderizza di nuovo.

Grandi set di icone

Ogni icona usa filtri SVG per ombra e luce. Se mostri centinaia di icone, renderizza solo le righe visibili oppure usa i file SVG statici in tag <img>, che il browser rasterizza una sola volta.

Import diretti

I server di sviluppo spesso caricano l'intero indice del pacchetto, che fa riferimento a ogni icona. Per evitarlo, importa ogni icona dal proprio file:

import Folder from "kubai-icons-react/icons/folder";