iconLib.md

3 abordages

Font icons

Prós

• Código enxuto
• Fácil personalização com CSS
• Carrega todos os ícones

Contras

• Com o tempo pode ser que o build da biblioteca fique grande

Exemplo

<i class='bai bai-eye'></i>

Svg inline

Prós

• Fácil personalização com CSS
• Só carrega o que vai usar

Contras

• Código HTML muito poluído e verboso
• Não compartilha uma base comum de ícones

Exemplo

<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-search' viewBox='0 0 16 16'>
  <path d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z' />
</svg>

Como background image

Prós

• Código enxuto
• Só carrega o que vai usar

Contras

• Difícil personalização com CSS
• Precisa disponibilizar os SVG em CDN

Exemplo

<i class='bai bai-eye'></i>
.bai-eye {
  background-image: url(/images/eye.svg?1687d45…);
}