Icon component

A classe .icon aplica o estilo base a todos os ícones. Adicione-a sempre ao usar um componente de ícone:

.icon {
  --size: 1em;
  font-size: var(--size);
  font-family: 'Icon';
  height: 1em;
  width: 1em;
  display: inline-block;
  color: inherit;
  fill: currentColor;
  line-height: 1;
  flex-shrink: 0;
  max-width: initial;
}

Tamanhos

O design system inclui uma escala padrão de tamanhos. Adicione o modificador ao seu ícone:

<svg class="icon icon--sm" viewBox="0 0 16 16">
  <!-- ... -->
</svg>

Para personalizar a escala, edite as classes .icon-{size} no arquivo icons.scss:

.icon--xs {
  --size: 16px;
}

.icon--sm {
  --size: 20px;
}

/* edite em icons.scss para personalizar */

Valores fora da escala

O tamanho é controlado pela custom property --size. Para valores fora da escala, sobrescreva-a inline:

<svg class="icon" style="--size: 30px;" viewBox="0 0 16 16">
  <!-- ... -->
</svg>

Ou no CSS de um componente:

.component__icon {
  --size: 30px;
}

Integração de ícones

Existem diversas formas de integrar ícones ao design system — SVG Sprites, SVG inline, SVG symbols, icon fonts. Todos são compatíveis. Escolha o método que melhor se encaixa no seu projeto.

Outras classes

Para SVGs inline, use as classes utilitárias de SVG:

Biblioteca de ícones

Consulte o Figma ou o Storybook para visualizar todos os ícones disponíveis e seus nomes.

Usando a fonte de ícones

Use a tag <i> com a classe .icon seguida do nome do ícone:

<!-- estrutura básica -->
<i class="icon icon-nomedoicon"></i>

<!-- com tamanho -->
<i class="icon icon-robot icon--lg"></i>