Pular para o conteúdo principal

Biblioteca de Ícones

nota

As definições de uso e boas práticas dos ícones estão no componente Icon

Animalia-icon​

Explore todos os ícones disponíveis no Animalia Design System através da nossa Biblioteca de Ícones. Você pode pesquisar, visualizar e copiar facilmente os nomes das classes dos ícones para usar no seu projeto.

A biblioteca oferece:

  • 3.000+ ícones disponíveis em duas variantes
  • Busca inteligente por nome ou tags
  • Variantes Regular e Preenchido para cada ícone
  • Copy-to-clipboard - clique no ícone para copiar o nome da classe

Acessar Biblioteca de Ícones →

Instalação​

Adicione a biblioteca de ícones Animalia ao seu projeto com o npm:

npm i @animaliads/animalia-icon

Como utilizar​

Uso como Web Font​

Nossos ícones funcionam como fontes da web, facilitando a inserção em seu site. Basta adicionar um arquivo ao seu documento e usar tags simples para exibir ícones nítidos e escaláveis em vários estilos.

<!DOCTYPE html>
<html>
  <head>
    <link
      rel="stylesheet"
      type="text/css"
      href="https://unpkg.com/@animaliads/animalia-icon@1.0.0/src/regular/style.css"
    />
  </head>
  <body>
    <i class="an an-smiley"></i>
  </body>
</html>
nota

Você pode importar quantos pesos forem necessários. Apenas os pesos importados corresponderão e serão renderizados como ícones.

Variantes (Pesos)​

Os ícones Animalia vêm em 2 variantes:

  • Regular: Usa a classe .an + .an-{nome-do-icone}
  • Preenchido: Usa a classe .an-fill + .an-{nome-do-icone}

Para usar uma variante, você deve incluir um link para sua folha de estilo e usar a classe apropriada no ícone:

Regular:

<link
  rel="stylesheet"
  href="https://unpkg.com/@animaliads/animalia-icon@1.0.0/src/regular/style.css"
/>
<i class="an an-user"></i>

Preenchido:

<link
  rel="stylesheet"
  href="https://unpkg.com/@animaliads/animalia-icon@1.0.0/src/fill/style.css"
/>
<i class="an-fill an-user"></i>

Estilização​

Ícones Animalia são essencialmente texto, então você pode estilizá-los com CSS como qualquer fonte. Personalize o font-size, color e muito mais para combinar com seu design.

.my-icon {
  font-size: 24px;
  color: #8b5cf6;
}

Classes auxiliares de tamanho​

Precisa de opções rápidas de dimensionamento? Temos classes auxiliares disponíveis:

.an-xxs {
  font-size: 0.5em;
}
.an-xs {
  font-size: 0.75em;
}
.an-sm {
  font-size: 0.875em;
}
.an-lg {
  font-size: 1.25em;
}
.an-xl {
  font-size: 1.5em;
}
Atenção

Evite sobrescrever font-family, font-style, font-weight, font-variant ou text-transform. Fazer isso pode quebrar os ícones e exibir caracteres incorretos.

Recursos adicionais​

Para mais detalhes sobre design e boas práticas, veja em Começando na parte de Design.

Biblioteca no Figma​

A biblioteca de ícones do Animalia Design System pode ser encontrada na Comunidade do Figma.

Nesta página