Sistema de ícones e ícones

1) Papel de ícone no produto

Os ícones são um meio compacto de sentido e condição. Eles agilizam a digitalização, ajudam a poupar espaço e aumentam o reconhecimento dos patters. Nas interfaces de alimentos, o ícone complementa o texto e a cor em vez de substituí-los.

1. Sentido> estilo: cada ícone deve ter um cenário claro de aplicação.

2. Consistência: malha única, barras, ângulos, ritmo de preenchimento.

3. Disponibilidade: ícone não é o único sinal; há sempre uma assinatura/tooltip/aria.

4. Produtividade: um pipline SVG, spright e tokens cor/tamanho.

2) Grade e linhas-chave

Artbords básicos: 16 x 16, 20 x 20, 24 x 24 (principal), 32 x 32.
Linha-chave (keyline): círculo/quadrado encaixado com recuo de 1-2 px para equilíbrio ótico.
Passo de pixel: desenhando em coordenadas inteiras; stroke múltiplo 0. 5 px (normalmente 1. 5 px para 24 x 24).

• As diagonais mais espessas parecem mais finas - adicione 0. 25 px para stroke em locais problemáticos.
• O topo dos cantos afiados é um pouco empoeirado para dentro de keyline por 1 px, para não «remar».
• Canecas e pontos muitas vezes exigem + 1 px de diâmetro para uma massa visual igual.

Zonas de clique: área interativa ≥ 40 x 40 px (mobile), ≥ 32 x 32 px (desktop); o ícone está centralizado.

3) Estilo de marcação

• stroke: 1. 5 px (24×24), 1. 25 px (20×20), 1 px (16×16).
• linecap/linejoin: 'round' para amizade ou 'miter' para estilo técnico (captado na haydline).
• Ângulos de raio na geometria: 2-3 px (24 x 24).

Preenchimento (filled): para áreas densas e ícones de status.
Duotone: permitido para estados vazios ilustrativos, mas não para sinais UI críticos.

• Outline é um estado básico.
• Philled - ativo/seleção.
• Two-tone - decoração/ajuda.

4) Cor e contraste (WCAG)

O modo básico é um monocroma através de 'currentColor': o ícone herda a cor do texto/contexto.

• `icon. error 'fundo 3:1, com texto assinado (não apenas cor).
• `icon. on-surface '↔ fundo ≥ 3:1; para pequenos tamanhos apontar para 4. 5:1.
• Use «on-» cores nas tintas coloridas (contraste automático do sistema de cor).

5) Estados e interações

Default/Hover/Action/Disabled/Focus: diferença não só de cores - altera opacidade/preenchimento/espessura/pílula de fundo, adicione focus ring.
Bádges (contadores): contraste dígito ≥ 4. 5:1 para a tinta; Tamanho dos números ≥ 10-11 px.
Ícones Toggle (preferido, like): Altere o preenchimento e/ou o ponto interno, não apenas a cor.

6) Ícone + texto

Os ícones não substituem as editoras em acções-chave. Par mínimo: ícone + texto curto (ou tooltip por 'aria-label'). Nas listas e tabelas, o ícone é alinhado em relação ao texto e à linha de base.

7) Disponibilidade (A11y)

Para os ícones decorativos: 'role =' img 'aria-hidden =' true 'ou remover do fluxo de disponibilidade.
Para os significados:' <svg role =» img» aria-labelledy =» id»>' +' <title id = «id «> Descrição </title>' ou 'aria-label '.
O ícone não deve ser o único suporte de status: adicione texto/dica/pattern iconográfico (forma, barra).
O tamanho do texto e o contraste da assinatura correspondem ao WCAG (normal ≥ 4. 5:1).

8) SVG-pipline e desempenho

Porquê SVG: Definição vetorial, estilo CSS, peso pequeno com otimização.

• Armazenar arquivos mestres no Figma, exportar para SVG com opções: sem «group», sem «fill-rule» padrão, com o atributo «viewBox» e sem «width/height» fixo (redefinir para CSS).
• Desviar por SVGO (perfil de projeto): remover metadados, reduzir coordenadas e unir caminhos.
• Rejeitar fontes icônicas é um problema de acessibilidade e render.

1. Spright SVG:

html
<svg style="display:none">
<symbol id="icon-upload" viewBox="0 0 24 24">…</symbol>
</svg>
…
<svg class="i"><use href="#icon-upload"></use></svg>

repetições baratas, - não é fácil mudar 'stroke-width' em alguns piplins.
2. Componente inline-SVG (React): flexibilidade de estilos e props, tree-shaking.
3. External '<img>' é apenas decorativo/ilustrativo.

css
.i { width: 1em; height: 1em; color: var(--icon-color, currentColor); }
.i--muted { opacity:.64; }
.i--danger { color: var(--role-danger); }

9) API do componente (exemplo React)

tsx type IconProps = {
name: 'upload'      'download'      'wallet'      'trophy'      'shield'      string;
size?: number      '1em'      'sm'      'md'      'lg';
stroke?: number;       // 1      1. 25      1. 5 title?: string;        // для a11y decorative?: boolean;     // если true -> aria-hidden className?: string;
};

• Por padrão, 'size =' 1em 'e' stroke = 1. 5`.
• Se 'decorative', adicionamos 'aria-hidden =' true '.