# Diretrizes de Ícones - PharmData Design System

> **Regra de ouro**: Sempre Font Awesome. Nunca emojis.

---

## Por que Font Awesome, não emojis?

### 1. Inconsistência Visual

Emojis renderizam diferente em cada sistema:

| Sistema | Emoji 🦉 | Aparência |
|---------|----------|-----------|
| **iOS** | 🦉 | Estilo Apple (colorido, 3D) |
| **Android** | 🦉 | Estilo Google (flat design) |
| **Windows** | 🦉 | Estilo Microsoft (2D, cores diferentes) |
| **macOS** | 🦉 | Mesmo que iOS |
| **Linux** | 🦉 | Varia por fonte instalada |

**Resultado**: Interface inconsistente entre plataformas.

### 2. Limitações de Customização

```html
<!-- Emoji: NÃO pode customizar -->
<span style="color: red;">🦉</span> <!-- Ignora cor -->
<span style="font-size: 24px;">🦉</span> <!-- Tamanho limitado -->

<!-- Font Awesome: TOTAL controle -->
<i class="fas fa-owl" style="color: red; font-size: 24px;"></i>
```

### 3. Acessibilidade

```html
<!-- Emoji: Leitores de tela podem não interpretar corretamente -->
<button>Salvar 💾</button>

<!-- Font Awesome: Semântica clara com aria-label -->
<button>
    <i class="fas fa-save" aria-hidden="true"></i>
    <span class="sr-only">Salvar</span>
</button>
```

### 4. Profissionalismo

Emojis transmitem informalidade. PharmData é um sistema profissional para dados farmacêuticos regulados.

---

## Font Awesome no PharmData

### Instalação

**CDN** (recomendado para prototipagem):
```html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
```

**NPM** (recomendado para produção):
```bash
npm install --save @fortawesome/fontawesome-free
```

### Uso Básico

```html
<!-- Ícone sólido -->
<i class="fas fa-owl"></i>

<!-- Ícone regular (outline) -->
<i class="far fa-heart"></i>

<!-- Ícone com tamanho -->
<i class="fas fa-flask fa-2x"></i>

<!-- Ícone com cor personalizada -->
<i class="fas fa-atom" style="color: var(--teal-intense);"></i>
```

---

## Catálogo de Ícones PharmData

### Identidade e Marca

| Ícone | Classe | Uso |
|-------|--------|-----|
| <i class="fas fa-owl"></i> | `fa-owl` | Logo PharmData |
| <i class="fas fa-prescription-bottle"></i> | `fa-prescription-bottle` | Produtos farmacêuticos |
| <i class="fas fa-flask"></i> | `fa-flask` | Laboratório/química |

### Entidades de Dados

| Ícone | Classe | Uso |
|-------|--------|-----|
| <i class="fas fa-atom"></i> | `fa-atom` | Substâncias/moléculas |
| <i class="fas fa-pills"></i> | `fa-pills` | Medicamentos |
| <i class="fas fa-capsules"></i> | `fa-capsules` | Formas farmacêuticas |
| <i class="fas fa-syringe"></i> | `fa-syringe` | Administração |
| <i class="fas fa-hospital"></i> | `fa-hospital` | Organizações |
| <i class="fas fa-user-md"></i> | `fa-user-md` | Profissionais |

### Ações

| Ícone | Classe | Uso |
|-------|--------|-----|
| <i class="fas fa-plus"></i> | `fa-plus` | Adicionar/criar |
| <i class="fas fa-edit"></i> | `fa-edit` | Editar |
| <i class="fas fa-trash"></i> | `fa-trash` | Deletar |
| <i class="fas fa-save"></i> | `fa-save` | Salvar |
| <i class="fas fa-times"></i> | `fa-times` | Fechar/cancelar |
| <i class="fas fa-search"></i> | `fa-search` | Buscar |
| <i class="fas fa-filter"></i> | `fa-filter` | Filtrar |

### Status e Workflow

| Ícone | Classe | Uso |
|-------|--------|-----|
| <i class="fas fa-check-circle"></i> | `fa-check-circle` | Aprovado/completo |
| <i class="fas fa-clock"></i> | `fa-clock` | Pendente/em revisão |
| <i class="fas fa-times-circle"></i> | `fa-times-circle` | Rejeitado/erro |
| <i class="fas fa-exclamation-triangle"></i> | `fa-exclamation-triangle` | Alerta/atenção |
| <i class="fas fa-info-circle"></i> | `fa-info-circle` | Informação |

### Dados e Classificação

| Ícone | Classe | Uso |
|-------|--------|-----|
| <i class="fas fa-fingerprint"></i> | `fa-fingerprint` | Identificadores únicos |
| <i class="fas fa-sitemap"></i> | `fa-sitemap` | Taxonomias/hierarquias |
| <i class="fas fa-tags"></i> | `fa-tags` | Classificações |
| <i class="fas fa-barcode"></i> | `fa-barcode` | Códigos (UNII, CAS, etc.) |
| <i class="fas fa-database"></i> | `fa-database` | Bases de dados |

### Versionamento e Histórico

| Ícone | Classe | Uso |
|-------|--------|-----|
| <i class="fas fa-history"></i> | `fa-history` | Histórico de versões |
| <i class="fas fa-code-branch"></i> | `fa-code-branch` | Branches/versões |
| <i class="fas fa-sync"></i> | `fa-sync` | Sincronizar/atualizar |

### Navegação

| Ícone | Classe | Uso |
|-------|--------|-----|
| <i class="fas fa-chevron-right"></i> | `fa-chevron-right` | Breadcrumb separator |
| <i class="fas fa-chevron-down"></i> | `fa-chevron-down` | Expandir/colapsar |
| <i class="fas fa-arrow-left"></i> | `fa-arrow-left` | Voltar |
| <i class="fas fa-external-link-alt"></i> | `fa-external-link-alt` | Link externo |
| <i class="fas fa-ellipsis-v"></i> | `fa-ellipsis-v` | Menu de ações |

---

## Padrões de Uso

### Botões

```html
<!-- Botão com ícone e texto -->
<button class="btn btn-primary">
    <i class="fas fa-save mr-2"></i>
    Salvar
</button>

<!-- Botão só com ícone (usar aria-label) -->
<button class="btn btn-icon" aria-label="Editar">
    <i class="fas fa-edit"></i>
</button>
```

### Drops (Tags)

```html
<span class="drop drop-approved">
    <i class="fas fa-check mr-1"></i>
    APPROVED
</span>

<span class="drop drop-spor">
    <i class="fas fa-database mr-1"></i>
    SPOR/EMA
</span>
```

### Seções de Formulário

```html
<div class="section-header">
    <i class="fas fa-fingerprint mr-2"></i>
    Identificadores
</div>
```

### Navegação

```html
<!-- Breadcrumb -->
<div class="breadcrumb">
    <a href="/substances">Substâncias</a>
    <i class="fas fa-chevron-right"></i>
    <span>SUB-082615</span>
</div>
```

---

## Customização

### Cores

Use cores do Design System:

```html
<i class="fas fa-check-circle" style="color: var(--drop-approved-text);"></i>
<i class="fas fa-clock" style="color: var(--drop-review-text);"></i>
<i class="fas fa-times-circle" style="color: var(--drop-rejected-text);"></i>
```

### Tamanhos

```html
<i class="fas fa-owl fa-xs"></i>   <!-- Extra small -->
<i class="fas fa-owl fa-sm"></i>   <!-- Small -->
<i class="fas fa-owl"></i>         <!-- Normal -->
<i class="fas fa-owl fa-lg"></i>   <!-- Large -->
<i class="fas fa-owl fa-2x"></i>   <!-- 2x -->
<i class="fas fa-owl fa-3x"></i>   <!-- 3x -->
```

### Animações

```html
<!-- Spinner -->
<i class="fas fa-sync fa-spin"></i>

<!-- Pulse -->
<i class="fas fa-heart fa-pulse"></i>
```

---

## Casos Especiais

### Quando NÃO usar Font Awesome

1. **Estruturas moleculares**: Use SmilesDrawer
2. **Gráficos de dados**: Use D3.js ou Chart.js
3. **Logotipos de terceiros**: Use SVG ou PNG oficial

### Ícones Customizados Futuros

No futuro, PharmData terá seu próprio conjunto de ícones SVG:

```
design-system/
└── assets/
    └── icons/
        ├── pharmdata-logo.svg
        ├── molecule.svg
        ├── prescription.svg
        └── ...
```

Até lá, Font Awesome é o padrão.

---

## Checklist de Implementação

Ao adicionar ícones a uma interface:

- [ ] Usei Font Awesome (não emoji)?
- [ ] O ícone tem semântica clara para a ação/entidade?
- [ ] Botões icon-only têm `aria-label`?
- [ ] Cores seguem os tokens do Design System?
- [ ] Tamanho é apropriado para o contexto?
- [ ] Funciona em modo escuro (se aplicável)?

---

## Referências

- [Font Awesome Gallery](https://fontawesome.com/icons)
- [Font Awesome Accessibility](https://fontawesome.com/docs/web/dig-deeper/accessibility)
- [WAI-ARIA Icon Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/button/)

---

*Última atualização: 2025-11-20*