Перейти к содержимому

CoreIcon

Примеры использования и документация.

Единая иконка интерфейса: визуальная метка действия или состояния рядом с текстом — глаз распознаёт функцию быстрее, чем читает подпись. Одна точка входа для всей иконографики проекта: имя из локальной коллекции или любой набор Iconify, цвет и размер наследуются от контекста — иконка всегда выглядит «родной» на своём месте, от пункта меню до статуса в алерте.

Имя без двоеточия берётся из локальной коллекции app/assets/icons (префикс core: подставляется сам); имя с двоеточием ('lucide:rocket') передаётся в Iconify как есть — сотни тысяч готовых глифов без добавления файлов в проект. Размер — число (px, по умолчанию 16) или любая CSS-длина ('1.5em'): иконка масштабируется вместе с окружающим текстом. Цвет пропом не задаётся — наследуется от text-* утилит или родителя, включая прозрачность ('text-primary/50').

Доступность по умолчанию: иконка декоративная — aria-hidden="true" и focusable="false", скринридер молчит, таб её не видит; проп label переводит её в смысловую (role="img" + доступное имя). flow — фирменный перелив по силуэту глифа: uno-маска режет градиент темы по форме иконки; пара цветов перекрывается --icon-flow-a/-b, полная замена картинки — --icon-flow-image; при prefers-reduced-motion градиент статичен.

core — локальная коллекция (app/assets/icons)
arrow-right chevron-down close error eye grip-vertical loading menu monitor moon rotate-ccw sliders-horizontal sparkles star success sun warning
lucide — Iconify API
rocket house search settings heart calendar trash
tabler — Iconify API
flame bell download user lock camera umbrella
mdi — Iconify API
android apple github weather-night cart wifi paw
simple-icons — Iconify API, моно-логотипы
nuxt vuedotjs typescript bun vitest figma
Цвета — text-*
Размеры (px)
121620243248
Смысловая иконка — label (role="img" + aria-label); без label иконка декоративная (aria-hidden)
Статус с именем Декоративная рядом с текстом
Наследование цвета

Иконка без своего цвета берёт text-info родителя

Внутри бейджа И в чипе
flow — переливающийся градиент по форме иконки
Кастомные градиенты — перекрытие --icon-flow-a/-b или --icon-flow-image