Производительность
На этой странице описано, как пакеты влияют на размер бандла и затраты во время выполнения и как отображать много иконок.
Как загружаются и работают иконки
- Один модуль на иконку. Модули иконок не имеют побочных эффектов, поэтому сборщики удаляют иконки, которые вы не импортируете. После минификации и gzip первая иконка React или Vue добавляет около 4 КБ вместе с общей средой выполнения, а каждая следующая — около 0,6 КБ.
- Готовая разметка. Исходное состояние хранится в виде строки, поэтому до первой отрисовки не нужны вычисления ни на сервере, ни в браузере.
- Анимация по требованию. Код анимации выполняется, только пока иконка движется, и останавливается вместе с анимацией.
- Общий код. Все иконки используют один модуль геометрии, а все анимированные иконки — один общий runtime, поэтому браузеры и CDN кэшируют этот код один раз.
- CSS-цвета. Чтобы изменить цвет целой страницы иконок, достаточно одного изменения в CSS, перерисовка иконок не нужна.
Большие наборы иконок
Каждая иконка использует SVG-фильтры для тени и блика. Если вы показываете сотни иконок, отрисовывайте только видимые строки или используйте статичные SVG-файлы в тегах <img>, которые браузер растрирует один раз.
Глубокий импорт
Dev-серверы часто загружают весь индекс пакета, который ссылается на каждую иконку. Чтобы этого избежать, импортируйте каждую иконку из её собственного файла:
ts
import Folder from "kubai-icons-react/icons/folder";