React

kubai-icons-react предоставляет каждую иконку как компонент React. Требуется React 18 или новее.

Установка

bash

npm install kubai-icons-react

Использование

Импортируйте иконку по названию и отрисуйте её как компонент:

tsx

import { Calendar, Lock } from "kubai-icons-react";

export function Example() {
  return (
    <>
      <Calendar />
      <Lock size={32} color="#22C55E" variant="soft" title="Locked" />
    </>
  );
}

Пропсы

Проп	По умолчанию	Описание
`size`	24	Ширина и высота в пикселях.
`color`	currentColor	Основной цвет, от которого вычисляются все градиенты, контуры и знаки. См. Настройка.
`variant`	наследуется, иначе "color"	`"soft"` использует более светлые заливки и более тёмные контуры, а белые знаки рисует в тёмном тоне.
`badgeColor`	тёмно-серый	Цвет диска значка: любой CSS-цвет или `"semantic"`, чтобы цвет подбирался под каждый значок: зелёный для добавления, красный для удаления, жёлтый для предупреждения.
`trigger`	"hover"	`"hover"` запускает анимацию при наведении курсора на иконку или при её фокусе с клавиатуры. `"parent"` делает то же для ближайшего родительского элемента с `data-kubai-trigger`, а если такого нет, то для прямого родителя. `"none"` не добавляет обработчиков, поэтому анимацию запускает только проп `hover`.
`hover`	Нет	`true` запускает анимацию, а `false` проигрывает её в обратную сторону. Сочетайте с `trigger="none"` для полного контроля.
`active`, `defaultActive`, `onActiveChange`	Нет	Состояние «вкл/выкл» для иконок-переключателей, которые меняют состояние при нажатии или касании. Пример: `Bookmark`.
`title`	Нет	Доступное имя. Без него иконка получает `aria-hidden`. См. Доступность.

Остальные свойства SVG, например className, style, обработчики событий и ref, передаются в <svg>.

Запуск от родителя

Чтобы анимация запускалась при наведении на всю кнопку или её фокусе с клавиатуры, добавьте data-kubai-trigger на кнопку и trigger="parent" на иконку:

tsx

<button data-kubai-trigger className="btn">
  <Trash size={18} trigger="parent" />
  Delete
</button>

Иконки по названию

Если название иконки известно только во время выполнения, например приходит из API, используйте DynamicIcon. Каждая иконка по-прежнему загружается отдельным чанком, поэтому весь набор в бандл не попадает.

tsx

import { DynamicIcon } from "kubai-icons-react/dynamic";

export function ItemIcon({ name }: { name: string }) {
  return <DynamicIcon name={name} size={20} />;
}

Серверный рендеринг

Иконки работают в серверных и клиентских компонентах Next.js без настройки. Разметка отрисовывается на сервере, а анимация добавляется при гидратации. Исключение составляет DynamicIcon: на сервере он отрисовывает пустой placeholder и загружает иконку в браузере.

Глубокий импорт

Чтобы не загружать индекс пакета на dev-сервере, импортируйте иконку из её собственного файла. См. Производительность.

tsx

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