Ícones

Todos os ícones do Feitio, desenhados à mão. Busque pelo nome, em português ou inglês, e toque para copiar o código.

Todos os ícones

• Tarefa: copiar o códigofeitio-taskCopiado
• Agenda: copiar o códigofeitio-calendarCopiado
• Buscar: copiar o códigofeitio-searchCopiado
• Ajustes: copiar o códigofeitio-slidersCopiado
• Criar: copiar o códigofeitio-plusCopiado
• Certo: copiar o códigofeitio-checkCopiado
• Fechar: copiar o códigofeitio-closeCopiado
• Atenção: copiar o códigofeitio-warnCopiado
• Informação: copiar o códigofeitio-infoCopiado
• Abrir: copiar o códigofeitio-chevron-downCopiado
• Seguir: copiar o códigofeitio-chevron-rightCopiado
• Menu: copiar o códigofeitio-menuCopiado

Nenhum ícone com esse nome. Precisa de um novo? Veja como pedir, abaixo.

Toque num ícone para copiar o código dele.

Como usar

Todos os ícones moram num arquivo só, o icons/sprite.svg. Cada um é chamado pelo nome, herda a cor do texto em volta e o tamanho da letra.

<button type="button" class="feitio-button">
  <svg class="feitio-icon" aria-hidden="true"><use href="feitio/icons/sprite.svg#feitio-plus"/></svg>
  Novo agendamento
</button>

• Com palavra ao lado, o ícone leva aria-hidden="true": quem explica é a palavra.
• Sozinho, quem o contém leva o nome: aria-label no botão ou link.
• O tamanho vem da letra (1em); para outro tamanho, mude o tamanho do texto em volta ou o inline-size.

Um ícone novo

Ícone novo se desenha, com as regras de Iconografia e ilustração: dois traços em cada junção, inclinado, na cor do texto. O arquivo vai em icons/<nome>.svg, e bun run build refaz o sprite; o teste do Feitio confere as regras.