Icon
Envolve os ícones do lucide-react com tamanhos da escala, cor por tom semântico e traço ajustado ao tamanho. Sem rótulo, o ícone é decorativo e fica oculto para leitores de tela.
Tamanhos
O traço afina conforme o ícone cresce, para manter o peso visual parecido.
xs · 12
sm · 16
md · 20
lg · 24
xl · 32
Tons
O tom aplica as cores de texto semânticas. O padrão, current, herda a cor do elemento pai.
AssinarprimaryCertificadoaccentAssinatura válidasuccessAguardando vocêwarningCertificado expira em 7 diascautionHash divergentedangerEnvelope enviadoinfocontrato-locacao.pdfmuted
Acessibilidade
Com label, o ícone ganha role img e nome acessível. Use quando ele é a única informação, como num indicador de status sem texto.
Lido como “Assinatura verificada”.
<Icon icon={ShieldCheck} size="lg" tone="success" label="Assinatura verificada" />Props
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| icon | LucideIcon | — | Componente do lucide-react a desenhar. |
| size | "xs" | "sm" | "md" | "lg" | "xl" | "md" | 12, 16, 20, 24 ou 32px. |
| tone | "current" | "strong" | "main" | "muted" | "subtle" | "primary" | "accent" | "success" | "warning" | "caution" | "danger" | "info" | "current" | Cor semântica do traço. |
| label | string | — | Nome acessível. Sem ele, o ícone recebe aria-hidden. |
| strokeWidth | number | — | Sobrescreve o traço calculado pelo tamanho. |