Exibição
Ícone
Svg de traço 1,5 na cor do texto, em três tamanhos.
Exemplo
<svg class="u-i u-i--sm" viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
<svg class="u-i" viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
<svg class="u-i u-i--lg" viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>Instalação
Ícone vem no pacote completo, em unslop.css:
curl -fsSL unslop.leallabs.dev/i | shSem build É só CSS: com unslop.css na página, as classes já funcionam.
Classes e variantes
| Classe | O que faz |
|---|---|
u-i | 18px, sem preenchimento, traço em currentColor. |
u-i--sm | 16px. |
u-i--lg | 22px. |
Acessibilidade e teclado
Estado e papéis
| Onde | Atributo | O que diz |
|---|---|---|
aria-hidden="true" | no svg | Ícone é decoração. O nome vai no texto ou no aria-label do botão. |
Os ícones de chevron, seta, check, busca e mais do próprio sistema saem de Unslop.icon(nome), usado pelos componentes com JS.