Shared/Icon Wrapper

Icon Wrapper

Renderizador estándar de íconos que mapea tokens de tamaño semántico a utilidades size-* de Tailwind. Acepta tanto íconos de lucide-react como componentes SVGR personalizados. Maneja accesibilidad vía aria-label / aria-hidden.

Tamaños

Los seis tokens de tamaño semántico mapeados a valores en píxeles.

xs12px
sm16px
md20px
lg24px
xl32px
2xl40px

Galería de Íconos

Cualquier ícono de lucide-react funciona — pasá la referencia del componente directamente.

Grosor de Trazo

Ajustá el peso del trazo de lucide para diferentes estilos visuales.

sw 1
sw 1.5
sw 2
sw 2.5

Tokens de Color

Override del color vía className usando tokens semánticos.

primary
muted
destructive
foreground

Accesibilidad

Los íconos decorativos usan aria-hidden. Los íconos interactivos requieren aria-label.

Decorativo (aria-hidden)

Sin aria-label — renderizado con aria-hidden="true".

Este ícono es decorativo

Con significado (aria-label)

Pasá aria-label cuando el ícono transmite significado sin texto adyacente.