'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Fundamentos
Íconos
Íconos de Lucide en los tamaños y el trazo del kit, a través de un componente Icon que puedes apuntar a otro set.
import { Icon } from '@alea/ui';import { Search } from 'lucide-react';
Ejemplos
Tamaños y tonos
sm 16, md 20, lg 24, o cualquier número. Los tonos vienen de los tokens.
Trazo
Los trazos son de 2 en la grilla de 24 px por defecto. Más finos se ven más livianos.
Otro set de íconos
Icon acepta cualquier componente con size y strokeWidth, así un set propio encaja directo.
Tokens
Los tokens de diseño que usa este componente, con su valor en el tema actual. Cambia cualquiera para darle otro estilo.
Color
--alea-accent-strong…--alea-status-danger…--alea-status-info…--alea-status-success…--alea-status-warning…--alea-text-muted…
Props
Icon props
Un ícono con los tamaños y el trazo del kit, del set incluido o del tuyo.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
iconobligatoria | IconComponent | - | El componente de ícono, por ejemplo `Search`. Funciona cualquier componente con las mismas props, así el set se puede cambiar. |
label | string | - | Dale un nombre para lectores de pantalla cuando el ícono significa algo por sí solo. Sin él, el ícono queda oculto para ellos. |
size | IconSize | 'md' | sm 16, md 20, lg 24, o un número de px. |
strokeWidth | number | 2 | Grosor del trazo en la grilla de 24 px (escala con el ícono). Por defecto 2. |
tone | "danger" | "accent" | "success" | "warning" | "info" | "current" | "muted" | 'current' | Color de los tokens: currentColor (por defecto), muted, accent, success, warning, danger, info. |
Especificaciones
Generado desde el código: las variantes de los tipos, los estados y tokens del CSS, y los patrones de motion que aplican. Las grillas muestran el componente real en ambos temas; los números se miden en la página.
- Variantes
tonedangeraccentsuccesswarninginfocurrentmuted- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-icon- Atributos data
data-tone=muteddata-tone=accentdata-tone=successdata-tone=warningdata-tone=dangerdata-tone=info
Accesibilidad
- Los íconos decorativos se ocultan a los lectores de pantalla (aria-hidden).
- Dale un nombre a un ícono solo cuando significa algo por sí mismo; un botón con solo un ícono toma su nombre del aria-label del botón.
Qué hacer y qué evitar
Hacer
- Usa 16 px en interfaces densas y botones, 20 px en campos, 24 px cuando van solos.
- Nombra los botones de solo ícono con aria-label.
Evitar
- No mezcles sets de íconos en una misma pantalla.
- No uses un ícono como la única forma de decir algo importante.
En Figma
El kit de Figma usa los mismos íconos de Lucide como componentes con una propiedad de tamaño.