Novidade!

Recebemos novos ícones na versão 1.2 da biblioteca de ícones da Bevi

Bevi Icon

Esse sistema tem como objetivo auxiliar todos os funcionários da Bevi para utilização correta dos ícones.

Como utilizar

Para visualizar os ícones você pode acessar a aba de Coleções ou Ícones, ao observar todos os ícones, pode notar que é possível clicar para ver mais opções, e após abrir novas informações, verá esse menu.

Menu de opções para seleção de íconeMenu de opções para seleção de ícone

Tipos de ícones

A biblioteca de ícones da Bevi tem a separação de 4 tipos, são eles:

Solid

Ícones solidos possuem sempre uma cor única.

Aplicação:
  • Permite a alteração para qualquer cor
  • Ideal para aplicações pequenas
  • Ideal para aplicação em texto

Duo

Ícones de dois tons, vão sempre variar entre a cor primaria e secundária da Bevim com graus de opacidade.

Aplicação:
  • Ideal para aplicações grandes

Dark

Ícones escuros se mantém em uma única cor, com graus de opacidade quando necessário.

Aplicação:
  • Ideal para fundos claros
  • Ideal para aplicações grandes
  • Ideal para aplicações pequenas

Light

Ícones claros se mantém em uma única cor, com graus de opacidade quando necessário.

Aplicação:
  • Ideal para fundos escuros
  • Ideal para aplicações grandes
  • Ideal para aplicações pequenas

Ações

Pelo menu de interação, além de escolher o tipo de ícone que deseja, pode escolher a ação que deseja realizar

Copiar SVG

A cópia do SVG será adicionado automaticamente em sua área de transferência, possibilitando colar o ícone em algum software desejado ou diretamente em código.

Download SVG

Quando clicar, será realizado o download do ícone desejado automaticamente

CDN

Para os programadores, está disponível um CDN com todos os ícones da verão Solid, dessa forma fica mais leve e rápida a aplicação em códigos.

Repositório no GitHub

Caso queira acompanhar o desenvolvimento da biblioteca de ícones

https://github.com/BeviProjects/BeviIconFont/tree/v1.0.1

Link CDN

Para utilização dos ícones solid em código, basta copiar o link CDN e aplicar em seu código HTML.

<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/BeviProjects/BeviIconFont@v1.0.1/dist/compressed/main.css" />

Aplicação em HTML

Para aplicar diretamente no seu código, é preciso adicionar em um elemento <i> a class que deseja seguida de algumas regras:

Prefixo: bv- Abreviação de Bevi Icon
Conteúdo: eco Nome do ícone
Sufixo: -solid Tipo do ícone

Exemplo:

<i class="bv-eco-solid" />