Performances

Comment les icônes se chargent et s’exécutent

• Un module par icône. Les modules d’icônes n’ont aucun effet de bord : les bundlers retirent les icônes que vous n’importez pas. Minifiée et compressée avec gzip, la première icône React ou Vue ajoute environ 4 Ko, runtime partagé compris, et chaque icône supplémentaire environ 0,6 Ko.
• Balisage prérendu. La pose de repos est fournie sous forme de chaîne : aucun calcul n’est nécessaire avant le premier affichage, côté serveur comme dans le navigateur.
• Animation à la demande. Le code d’animation ne s’exécute que pendant qu’une icône bouge et s’arrête à la fin du mouvement.
• Code partagé. Toutes les icônes partagent un même module de géométrie, et toutes les icônes animées un même runtime : les navigateurs et les CDN ne mettent ce code en cache qu’une seule fois.
• Couleurs CSS. Changer la couleur d’une page d’icônes se fait en une seule modification CSS, sans les redessiner.

Grands ensembles d’icônes

Chaque icône utilise des filtres SVG pour son ombre et son reflet. Si vous affichez des centaines d’icônes, ne rendez que les lignes visibles, ou utilisez les fichiers SVG statiques dans des balises <img>, que le navigateur ne rastérise qu’une fois.

Imports profonds

Les serveurs de développement chargent souvent tout l’index du paquet, qui référence chaque icône. Pour l’éviter, importez chaque icône depuis son propre fichier :