Icon

Любая иконка по правилам кита: размер от текста, штрих темы, зеркалирование в RTL, доступное имя; createIcon и галерея из 111 иконок. Бесплатно, MIT · Базовые элементы › Текст и иконки

Установка

npx valyro-cli@latest add icon

npx shadcn@latest add https://valyro.xyz/r/icon.json

npm install valyro-ui

import 'valyro-ui/styles.css';
import { Icon } from 'valyro-ui';

Пропсы

Prop	Type	Default
`as`	`ComponentType<IconSourceProps>`		An icon component to render: one of the kit's (`SearchIcon`), Lucide's, Heroicons'… Or pass an `<svg>` as children.
`children`	`ReactNode`		A raw `<svg>` (or any icon element) to size and label.
`size`	`number \| string`	`'1em'`	Width and height: a number of pixels or any CSS length. Default `1em`, the size of the surrounding text.
`strokeWidth`	`number \| string`		Stroke width for stroke icons; default the theme's `--ui-icon-stroke`, so foreign icons match the kit's.
`label`	`string`		Accessible name: the icon becomes an image (`role="img"`). Without it the icon is decorative and hidden from screen readers.
`directional`	`boolean`	`false`	Mirror the icon in right-to-left layouts (arrows, chevrons, "send").

Похожие компоненты

Kbd — Клавиши и сочетания: одна строка «mod+k» — ⌘K на Mac и Ctrl+K на остальных, для скринридера — словами
Highlight — Совпадения поиска в тексте: без учёта регистра и диакритики, несколько терминов своими цветами, готовые диапазоны, текущее совпадение
Button — Кнопки всех типов
Icon Button — Кнопка с иконкой
Color Mode Switch — Светлая, тёмная или системная: выбор сохраняется, применяется до первого кадра, синхронизируется между вкладками и сменяется плавно
Button Group — Группы кнопок
Copy to Clipboard — Копирование с подтверждением
Badge — Статусы и метки
Tag — Удаляемые и кликабельные теги, группы с «+N»
Avatar — Аватары пользователей
Tooltip — Всплывающие подсказки
Separator — Разделители

Назад: Separator · Далее: Kbd · Весь раздел «Базовые элементы»