Настройка

Цвет иконок, значки, размер и анимация задаются через пропсы и CSS custom properties.

Цвет

Все цвета иконки вычисляются от одного основного цвета. По умолчанию это currentColor, поэтому его можно изменить, задав CSS-свойство color у самой иконки или у любого родительского элемента:

html

<span style="color: #14B8A6"><kubai-icon name="leaf"></kubai-icon></span>

Цвета рассчитываются с помощью CSS color-mix(), поэтому переход (transition) для color плавно меняет все градиенты:

css

.kubai-icon { transition: color .3s ease; }

Значки

У иконки со значком, например folder-plus или user-check, в одном из углов есть значок. По умолчанию это тёмный диск с белым символом. badgeColor меняет цвет диска. badgeColor="semantic" подбирает подходящий цвет для каждого значка: зелёный для добавления и завершения, красный для удаления и отмены, жёлтый для предупреждений.

tsx

import { FolderPlus } from "kubai-icons-react";

<FolderPlus />                          {/* dark badge */}
<FolderPlus badgeColor="semantic" />    {/* green plus */}
<FolderPlus badgeColor="#7C3AED" />

CSS custom properties

Задайте их у иконки или у любого родительского элемента, чтобы переопределить отдельные тона. Знаки — это линии и символы, нарисованные на иконке.

Свойство	Управление
`--ki-c`	Базовый цвет для градиентов и светлых знаков. По умолчанию: `currentColor`.
`--ki-e`	Базовый цвет для контуров и тёмных знаков. По умолчанию: `--ki-c`.
`--ki-w`	Цвет знаков, которые по умолчанию белые.
`--ki-b`	Цвет диска значка. По умолчанию: нейтральный тёмно-серый.
`--ki-l`	Насколько сильно крупные сплошные заливки светлеют к белому к верхнему краю, от 0% до 100%.

variant="soft" задаёт все эти значения, кроме --ki-b.

Выбор варианта для всей страницы

Вариант наследуется так же, как color. Задайте его на любом элементе, и все иконки внутри будут ему следовать, если у них нет собственного variant. Побеждает ближайшая настройка: сначала проп самой иконки, затем ближайший элемент, затем значение по умолчанию color.

tsx

import { Folder, VARIANTS } from "kubai-icons-react";

<body style={VARIANTS.soft}>
  <Folder />                  {/* soft */}
  <Folder variant="color" />  {/* color */}
</body>

Тот же объект работает во Vue с :style. Без фреймворка вызовите setVariant:

import { setVariant } from "kubai-icons/runtime";

setVariant(document.documentElement, "soft");

В статичных SVG-файлах цвета записаны внутрь, поэтому вариант выбирается по папке: svg/ или svg-soft/.

Размер

Размер задаётся пропом size. При размере 24 px и меньше используйте базовые иконки вместо иконок со значком: для значка там мало места. Холст описан в разделе Язык дизайна.

Анимация

Каждая анимация длится 460 мс с функцией cubic-bezier(.22, 1, .36, 1) и начинается с текущего положения иконки, поэтому её можно развернуть на середине. Если включён prefers-reduced-motion, иконки сразу переходят в конечное положение без анимации.