Ícones

Todos os ícones são criados em um quadro de 24x24 pixels. Qualquer redimensionamento deve ser feito a partir deste tamanho.

Importação

import { NOME_DO_ICONE } from '@resultadosdigitais/tangram-react-icons';

Tamanhos

Ícones circulares usam uma escala um pouco diferente, já que são envoltos por um objeto maior.

Para utilizar os ícones circulares utilize o RoundedIcon.

<RoundedIcon
  fill={'var(--success-surface-high-emphasis)'}
  size={RoundedIcon.sizes.xs}
>
  <Bell fill={'var(--neutral-icon-inverse)'} title="Título do ícone" />
</RoundedIcon>

Boas práticas

Acessibilidade

Para oferecer uma experiência melhor com leitores de tela, inclua sempre um título no ícone, descrevendo o que ele significa ou sua funcionalidade. Para isso, use o elemento <title>.

Biblioteca de ícones

Como adicionar ícones

Veja o guia de como adicionar ícones.

Feedback

Para reportar algum problema, solicitar novos ícones, solicitar novos casos de uso de componentes, tirar dúvidas, enviar sugestões ou reportar bugs, entre em contato pelo nosso canal no Slack #tangram-design-system.