Desempenho

Esta página descreve como os pacotes afetam o tamanho do bundle e o custo em tempo de execução, e como renderizar muitos ícones.

Como os ícones são carregados e executados

Um módulo por ícone. Os módulos de ícone não têm efeitos colaterais, então os bundlers removem os ícones que você não importa. Minificado e com gzip, o primeiro ícone React ou Vue adiciona cerca de 4 KB, incluindo o runtime compartilhado, e cada ícone adicional cerca de 0,6 KB.
Marcação pré-renderizada. A pose de repouso é entregue como string, então não exige cálculo antes da primeira renderização, no servidor ou no navegador.
Movimento sob demanda. O código de movimento só roda enquanto o ícone se move e para quando o movimento termina.
Código compartilhado. Todos os ícones usam um único módulo de geometria e todos os ícones animados usam um único runtime, então navegadores e CDNs guardam esse código em cache uma só vez.
Cores em CSS. Mudar a cor de uma página de ícones é uma única alteração de CSS e não exige nova renderização.

Conjuntos grandes de ícones

Cada ícone usa filtros SVG para sombra e brilho. Se você exibir centenas de ícones, renderize apenas as linhas visíveis ou use os arquivos SVG estáticos em tags <img>, que o navegador rasteriza uma só vez.

Importações diretas

Servidores de desenvolvimento costumam carregar todo o índice do pacote, que referencia todos os ícones. Para evitar isso, importe cada ícone do próprio arquivo:

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