Iconos

Set de línea monocromo sobre Lucide (lucide-react). Chrome con Icon; estados semánticos con StateIcon.

Preview principal

ICON · LUCIDE39 iconos

chevron-down

chevron-up

chevron-left

chevron-right

close

check

calendar

search

user

mail

bell

filter

more

arrow-right

arrow-up-right

edit

help

sort

copy

trash

archive

settings

sun

moon

plus

minus

download

share

star

clock

lock

image

folder

home

book

link

eye

map

tag

Trazo 1.75 · color currentColor — hereda del contexto.

Tamaños

size en px. Default 20.

16px

20px

24px

32px

Estados

StateIcon — colores semánticos (info / success / error / warning).

info

success

error

warning

En contexto

Con Button e inline: el icono toma el color del padre.

Añadir Buscar hola@devsoftec.com

Cómo usarlo

import { Icon, StateIcon } from "devsoftec-ui";

<Icon name="check" size={20} />
<Icon name="chevron-right" strokeWidth={2} />
<StateIcon name="success" />

Props

Icon

Prop	Tipo	Default	Descripción
name	IconName	—	Nombre del set curado
size	number	20	Tamaño en px
color	string	currentColor	Color
strokeWidth	number	1.75	Grosor del trazo

StateIcon

Prop	Tipo	Default	Descripción
name	info | success | error | warning	—	Estado coloreado
size	number	16	Tamaño en px
color	string	color del estado	Override opcional

Convenciones

• Chrome (UI): Icon, trazo 1.75, currentColor — sigue el color del contexto.
• Estados: StateIcon, colores semánticos (éxito / error / aviso / info).
• Los glifos vienen de lucide-react (MIT). Botones solo-icono: aria-label obligatorio.