Sistema de iconografía con tamaños y color semántico por tokens. Incluye selector para buscar iconos y copiar el snippet de uso.
Sizes · Semantic Colors · Lucide + SVG
Importa los estilos base y el componente Icon.
1import 'nave-ui-library/styles.css'2import { Icon } from 'nave-ui-library/react'3import { Home } from 'lucide-react'4 5<Icon size="md" color="primary">6 <Home />7</Icon>Busca, previsualiza y copia el snippet de uso de cualquier ícono del catálogo.
Icono activo: Home (lucide)
1import { Home } from 'lucide-react'2import { Icon } from 'nave-ui-library/react'3 4<Icon size="md" color="default">5 <Home />6</Icon>Escala completa de tamaños y variantes de color semántico.
Composición de ícono + texto con posición configurable.
Props disponibles para el componente Icon.
| Prop | Type | Default | Description |
|---|---|---|---|
size | "xs" | "sm" | "md" | "lg" | "xl" | "md" | Tamaño del ícono. |
color | "default" | "primary" | "muted" | "danger" | "success" | "default" | Color semántico del ícono. |
childrenreq | ReactNode | — | Contenido SVG o componente Lucide. |
className | string | — | Clases CSS adicionales. |
1{2 "name": "Icon",3 "description": "Componente para renderizar iconos con diferentes tamaños y colores.",4 "component": "Icon",5 "files": [6 "components/base/foundations/icon/Icon.tsx"7 ],8 "dependencies": [9 "react",10 "@radix-ui/react-slot",11 "class-variance-authority"12 ],13 "props": {14 "size": {15 "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl'",16 "description": "Size of the icon."17 },18 "color": {19 "type": "'default' | 'primary' | 'muted' | 'danger' | 'success'",20 "description": "Color variant of the icon."21 },22 "asChild": {23 "type": "boolean",24 "description": "Render as child component."25 }26 }27}