Iconografia
Biblioteca — Lucide Angular
O SystemClinic usa exclusivamente a biblioteca Lucide (lucide-angular) para todos os ícones da interface. Nenhuma outra biblioteca de ícones deve ser adicionada.
Lucide foi escolhida por:
- Design coerente (stroke uniforme de 2 px, viewBox 24×24)
- Tree-shakeable (só os ícones importados vão para o bundle)
- Licença ISC (permissiva)
- Sem dependência de fonte (SVG inline via componente Angular)
Versão em uso: lucide-angular@0.446 — veja o package.json do projeto.
Instalação e Uso
typescript
// app.config.ts
import {
LucideAngularModule,
LayoutDashboard,
Users,
Calendar,
} from "lucide-angular";
export const appConfig: ApplicationConfig = {
providers: [
importProvidersFrom(
LucideAngularModule.pick({ LayoutDashboard, Users, Calendar }),
),
],
};html
<!-- Template -->
<lucide-icon name="layout-dashboard" [size]="20" [strokeWidth]="2" />Sempre use
.pick()— nunca importe o módulo inteiro (LucideAngularModule.forRoot(icons)), pois inclui todos os ~1500 ícones no bundle.
Tamanhos Padrão
| Contexto | Tamanho | Stroke Width |
|---|---|---|
| Ícone em botão primário | 16 px | 2 |
| Ícone em botão ghost / outline | 16 px | 2 |
| Ícone em input (leading/trailing) | 16 px | 1.5 |
| Ícone de navegação lateral | 20 px | 2 |
| Ícone decorativo em card | 20 px | 2 |
| Ícone de estado (empty state) | 48 px | 1.5 |
| Ícone de ilustração | 64 px | 1.5 |
Nunca use tamanhos intermediários não tabelados (ex.: 18 px, 22 px). A consistência visual depende de poucos tamanhos definidos.
Cor dos Ícones
Ícones herdam a cor do texto (currentColor) por padrão. Use as classes de cor do design system:
| Contexto | Classe Tailwind |
|---|---|
| Ícone de ação primária | text-brand-600 |
| Ícone de conteúdo (neutro) | text-neutral-500 |
| Ícone inativo / disabled | text-neutral-300 |
| Ícone de sucesso | text-success-600 |
| Ícone de erro | text-error-600 |
| Ícone de aviso | text-warning-600 |
| Ícone em fundo escuro | text-neutral-100 |
Ícones Mapeados por Módulo
Esta tabela evita inconsistências entre telas diferentes — use o ícone mapeado, não escolha um diferente por preferência pessoal.
Navegação Principal
| Módulo | Ícone Lucide | Nome no código |
|---|---|---|
| Dashboard | layout-dashboard | LayoutDashboard |
| Agendamentos | calendar | Calendar |
| Pacientes | users | Users |
| Prontuário | file-text | FileText |
| Financeiro | banknote | Banknote |
| Relatórios | bar-chart-2 | BarChart2 |
| Estoque | package | Package |
| Configurações | settings | Settings |
Ações Comuns
| Ação | Ícone | Nome |
|---|---|---|
| Adicionar / Novo | plus | Plus |
| Editar | pencil | Pencil |
| Excluir | trash-2 | Trash2 |
| Salvar | save | Save |
| Cancelar | x | X |
| Fechar modal | x | X |
| Buscar | search | Search |
| Filtrar | filter | Filter |
| Exportar | download | Download |
| Importar | upload | Upload |
| Copiar | copy | Copy |
| Visualizar | eye | Eye |
| Ocultar | eye-off | EyeOff |
| Imprimir | printer | Printer |
| Compartilhar | share-2 | Share2 |
| Ordenar | arrow-up-down | ArrowUpDown |
| Atualizar | refresh-cw | RefreshCw |
Estados e Feedback
| Estado | Ícone | Nome |
|---|---|---|
| Sucesso / Concluído | check-circle-2 | CheckCircle2 |
| Erro | x-circle | XCircle |
| Aviso | alert-triangle | AlertTriangle |
| Informação | info | Info |
| Carregando | loader-2 | Loader2 |
| Vazio (empty state) | inbox | Inbox |
| Bloqueado | lock | Lock |
Status de Agendamento
| Status | Ícone | Cor |
|---|---|---|
| Agendado | clock | text-info-500 |
| Confirmado | check | text-brand-600 |
| Em atendimento | activity | text-warning-500 |
| Concluído | check-circle-2 | text-success-600 |
| Cancelado | x-circle | text-error-600 |
| No-show | user-x | text-neutral-400 |
Regras de Acessibilidade
- Ícones decorativos (que acompanham texto):
aria-hidden="true"no elemento<lucide-icon> - Ícones que são o único conteúdo de um botão: o botão precisa de
aria-labeldescritivo - Ícones de estado (sem texto acompanhante): adicionar
<span class="sr-only">Concluído</span>junto
html
<!-- Correto — ícone decorativo -->
<button>
<lucide-icon name="plus" aria-hidden="true" />
Novo Agendamento
</button>
<!-- Correto — botão ícone com aria-label -->
<button aria-label="Excluir paciente João Silva">
<lucide-icon name="trash-2" aria-hidden="true" />
</button>
<!-- Errado — ícone de estado sem alternativa textual -->
<lucide-icon name="check-circle-2" />O que não fazer
- Usar dois ícones diferentes para a mesma ação em telas distintas
- Misturar Lucide com ícones de outra biblioteca (mesmo que seja para um módulo isolado)
- Usar ícones com
stroke-widthdiferente de 2 em elementos de navegação - Escalar ícones com CSS
transform: scale()— use o atributo[size] - Criar SVGs inline customizados sem aprovação do design lead