Ícones: geometria com função.
O sprite reúne marca preservada, ações e instrumentos geométricos. O desenho vem do símbolo correto; o contexto vem do texto, do nome acessível e do limite do controle. Um ícone decorativo nunca assume sozinho a função de uma ação.
Desenho, alvo e nome.
O botão de ícone separa uma área de toque de 44 px da geometria interna de 20 px. Nome acessível, foco e estado pertencem ao controle; o SVG decorativo permanece fora da árvore de acessibilidade.
-
Foco no controle
O anel duplo envolve o botão; não apenas o path interno. Foco permanece visível sobre qualquer superfície e não deve ser recortado pela moldura.
-
Geometria interna
O viewBox conserva as proporções do símbolo. O ícone dentro de .xq-icone-botao mede 20 px; não ampliar o path para preencher toda a área de toque.
-
Alvo de interação
O botão mede 44 px, com espaço interno. Um desenho pequeno não exige uma área clicável igualmente pequena.
-
Nome acessível
O botão só com ícone recebe aria-label com verbo de ação. O SVG recebe aria-hidden e focusable=false para evitar anúncio duplicado.
-
Símbolo do sprite
use referencia o ID do símbolo inline. Colar o sprite uma vez no body mantém os nomes únicos e permite renderização offline.
-
Vocabulário em contexto
O cabeçalho declara a ação Avançar, coerente com a seta e o nome acessível. Reutilize esse significado no sistema; cantoneiras e retículas continuam instrumentos de estrutura, sem comportamento de botão.
Contratos de tokens CSS
Valor ou alias no tema claro, propriedade consumidora e limite de uso. Cores são apresentadas em RGB equivalente; a fonte continua no CSS de tokens. O inspetor mostra a resolução no tema escolhido.
| Token / expressão | Aplicação CSS | Regra |
|---|---|---|
--xq-icon-md
20px
|
.xq-icone-botao .xq-icon
inline-size / block-size
|
20 px dentro do controle; a classe .xq-icon isolada usa dimensão base própria. |
--xq-icon-stroke
1.5px
|
.xq-icone-botao .xq-icon
stroke-width
|
1,5 px no SVG do controle; respeitar paths do sprite que declaram traço próprio. |
--xq-controle
44px
|
.xq-icone-botao
inline-size / min-block-size
|
44 px para o alvo, independente da dimensão interna do ícone. |
--xq-ritmo-2
8px
|
.xq-icone-botao
padding
|
8 px internos sem reduzir o alvo para acompanhar o desenho. |
--xq-raio-controle
3px
|
.xq-icone-botao
border-radius
|
Raio técnico de 3 px; não transformar ações utilitárias em pills arbitrárias. |
--xq-linha-forte
rgb(97 115 104)
|
.xq-icone-botao
border-color
|
Limite funcional distinto da grelha decorativa. |
--xq-superficie
rgb(231 231 222)
|
.xq-icone-botao
background
|
Plano opaco do botão resolve no tema local. |
--xq-texto
rgb(25 39 32)
|
.xq-icone-botao
color
|
currentColor transporta o sinal do controle para o SVG. |
--xq-focus-width
2px
|
.xq-icone-botao:focus-visible
outline-width
|
2 px de anel externo; preservar mesmo em botão somente com ícone. |
--xq-focus-gap
2px
|
.xq-icone-botao:focus-visible
outline-offset
|
Separação de 2 px entre o alvo e o anel. |
--xq-focus-outer
var(--xq-anel)
|
.xq-icone-botao:focus-visible
outline-color
|
Cor de foco do tema; não igualar automaticamente ao pigmento da marca. |
--xq-motion-control
160ms
|
.xq-icone-botao
transition-duration
|
160 ms na cor de fundo; respeitar prefers-reduced-motion. |
Uso correto × uso incorreto
Compare a mesma intenção em duas composições. Os exemplos são amostras de leitura; os controles operáveis ficam no playground.
Um símbolo. Uma ação.
Consultar a fundaçãoA seta reforça o verbo. O texto informa o destino.
- O verbo explica a ação e o ícone reforça sua direção.
- SVG decorativo não gera anúncio duplicado.
- Instrumentos geométricos permanecem ligados à estrutura.
Qual é a ação?
Símbolos isolados, sem nome e sem contexto.
- O usuário precisa adivinhar o significado de cada símbolo.
- Desenho isolado não cria nome acessível para um controle.
- Uma aparência clicável sem função aumenta a ambiguidade.
Bancada do vocabulário e dos alvos.
Use os três atalhos para percorrer anatomia, contratos e comparativo desta página. Cada alvo mede 44 px e contém um desenho de 20 px. Os controles de estado alteram a moldura da amostra e sua mensagem; o botão indisponível conserva o estado disabled real.
O desenho localiza.
O nome explica.
Vocabulário pronto: ação, sinal de estado e instrumento usam o sprite local.
Pronto. Altere um controle para inspecionar o contrato.
Ensaio local e determinístico. A ação percorre carregamento → sucesso; movimento reduzido entrega o estado final imediatamente. Repetir preserva os controles.
Inspecionar tokens resolvidos
--xq-icon-md- 20px
--xq-icon-stroke- 1.5px
--xq-controle- 44px
--xq-ritmo-2- 8px
--xq-raio-controle- 3px
--xq-linha-forte- rgb(97 115 104)
--xq-superficie- rgb(231 231 222)
--xq-texto- rgb(25 39 32)
--xq-focus-width- 2px
--xq-focus-gap- 2px
--xq-focus-outer- var(--xq-anel)
--xq-motion-control- 160ms
Aplicar o contrato
Ação só com ícone
O nome pertence ao controle. O SVG recebe aria-hidden para que a ação seja anunciada uma vez.
<button class="xq-icone-botao" type="button" aria-label="Fechar painel">
<svg class="xq-icon" viewBox="0 0 24 24"
aria-hidden="true" focusable="false">
<use href="#xq-x"/>
</svg>
</button>Marca com nome próprio
A marca usa seu símbolo preservado e um nome acessível. Não aplicar as dimensões quadradas de um ícone utilitário ao logotipo.
<svg class="xq-logo" role="img" aria-label="Chesslab"
viewBox="547.5 389.91 430.221 79.49">
<use href="#xq-logo"/>
</svg>
<!-- O conteúdo de assets/sprite.svg entra uma vez no body. -->Dimensão do desenho e do alvo
A base .xq-icon mede 24 px. Dentro de .xq-icone-botao, uma regra mais específica aplica --xq-icon-md, 20 px. O alvo permanece em --xq-controle, 44 px; não se deve confundir uma medida com a outra.
<a class="xq-icone-botao" href="fundamentos.html"
aria-label="Consultar a fundação">
<svg class="xq-icon" viewBox="0 0 24 24"
aria-hidden="true" focusable="false">
<use href="#xq-arrow"/>
</svg>
</a>Critérios de aceite
- Cada use aponta para um símbolo existente do sprite inline.
- Botões só com ícone possuem nome acessível com verbo de ação.
- SVG decorativo fica fora do Tab e da árvore acessível.
- O alvo de toque mede 44 px e o foco não é recortado pelo container.