Fundamentos
Ícones
Lucide em todos os sistemas, como sprite SVG; três tamanhos; um ícone por papel; emoji não é ícone.
Quando usar
- ao lado do texto, reforçando
- sozinho só em botão com nome acessível e alvo de 44 px
Quando não usar
- emoji
- ícone de outro conjunto
- ícone sem texto e sem nome
Tamanhos
claro
escuro
<p class="site-icons"><svg class="hx-icon hx-icon-sm" aria-hidden="true"><use href="hibex/icons/sprite.svg#icon-bell"></use></svg> 16 · <svg class="hx-icon" aria-hidden="true"><use href="hibex/icons/sprite.svg#icon-bell"></use></svg> 20 · <svg class="hx-icon hx-icon-lg" aria-hidden="true"><use href="hibex/icons/sprite.svg#icon-bell"></use></svg> 24</p>
<svg class="hx-icon" aria-hidden="true"><use href="hibex/icons/sprite.svg#icon-bell"></use></svg>Um ícone por papel
A tabela completa é icons/roles.json; papel novo entra lá e o sprite é gerado de novo. O traço é o 2 original do Lucide na grade de 24: 2 px em 24, ~1,7 px em 20, ~1,3 px em 16.
Acessibilidade
- decorativo:
aria-hidden="true"; - com significado e sem texto:
role="img"+aria-label; - cor:
currentColor— o texto ao lado manda.
Origem: cap. 08 · ADR-0026 · desde a versão 0.1.0