Iconografía
Lucide
Onaris usa Lucide como set de iconos oficial: más de 1.500 iconos de trazo abierto, estilo outline consistente, y paquete oficial para React (lucide-react). El color se hereda con currentColor y el grosor de trazo es 2.
Especificación
| Propiedad | Valor | Nota |
|---|---|---|
| Librería | lucide-react | Paquete oficial. En HTML, UMD desde CDN. |
| Estilo | Outline / stroke | Nunca mezclar con iconos filled. |
| Grosor de trazo | 2 | Fijo en todo el sistema. No usar 1.5 ni 2.5. |
| Tamaños | S 14 · M 16 · L 20 | M es el default. Empty states usan 28px por excepción del componente. |
| Color | currentColor | Hereda del contenedor. Nunca hardcodear. |
| ViewBox | 0 0 24 24 | Uniforme en todo el set. |
Tamaños
Tres tamaños canónicos, como el resto del sistema. En densidad backoffice el estándar es 16px.
S · 14 · inline con texto
M · 16 · default
L · 20 · botones lg, headers
Set de uso frecuente
Los iconos que aparecen en los componentes del sistema, agrupados por función. Para el catálogo completo, consulta lucide.dev.
Acciones
CRUD y operacionespencil
trash-2
copy
save
download
upload
share-2
printer
circle-plus
plus
refresh-cw
x
Navegación
flechas y jerarquíachevron-right
chevron-left
chevron-down
chevron-up
chevrons-left
chevrons-right
arrow-right
arrow-left
menu
ellipsis-vertical
ellipsis
external-link
Formularios
campos y controlessearch
eye
eye-off
calendar
clock
palette
filter
check
lock
paperclip
arrow-up-down
list-filter
Feedback
estados y avisosinfo
circle-check
triangle-alert
circle-alert
circle-x
bell
loader-circle
circle-help
Catálogo y comercio
dominio Onarispackage
folder
folder-open
book-open
shopping-cart
tag
barcode
truck
file-text
receipt
star
image
Sistema
usuarios y configuraciónuser
users
settings
log-out
layout-dashboard
chart-column
database
map-pin
Uso
React (onaris-ui)
// Importar solo lo que se usa: tree-shaking automático
import { Pencil, Trash2, ChevronRight } from 'lucide-react';
<Pencil size={16} />
<Trash2 size={16} className="text-danger" />
// Dentro de componentes del sistema
<Button icon={<Pencil />}>Editar</Button>
<IconButton aria-label="Eliminar"><Trash2 /></IconButton>HTML estático
<script src="https://unpkg.com/lucide@0.454.0/dist/umd/lucide.js"></script>
<i data-lucide="pencil" class="lu lu-md"></i>
<script>lucide.createIcons();</script>Reglas. Nunca mezclar Lucide con iconos de otro estilo (filled, duotone). Nunca redefinir stroke-width. Todo IconButton necesita aria-label. Si un concepto de negocio no tiene icono en Lucide, se elige el más cercano y se documenta aquí antes de usarlo en producción.