Guia para frontend

Como usar o Inforce Icons em novos sites.

Inclua um CSS e um JS via CDN. O runtime troca classes conhecidas por SVG inline sob demanda, preservando cor via currentColor quando o SVG não possui cor própria.

1. Include padrão

<link rel="stylesheet" href="https://cdn.inforcedata.com.br/inforce-icons/1.2/inforce-icons.min.css" />
<script defer src="https://cdn.inforcedata.com.br/inforce-icons/1.2/inforce-icons.min.js"></script>

2. Classes recomendadas

<i class="ii ii-custom-inforce"></i>
<i class="ii ii-simple-github"></i>
<i class="ii ii-lobe-openai"></i>
<i class="ii ii-lucide-search"></i>

3. Compatibilidade Font Awesome

Suporta padrões novos e legados: FA5, FA6 e FA7.

<i class="far fa-heart"></i>      <!-- FA5 regular -->
<i class="fas fa-user"></i>       <!-- FA5 solid -->
<i class="fa-light fa-house"></i> <!-- FA6/FA7 -->

4. Estrutura das pastas

icons/custom/*.svg
icons/fa/solid/*.svg
icons/fa/regular/*.svg
icons/fa/light/*.svg
icons/fa/thin/*.svg
icons/fa/duotone/*.svg
icons/fa/brands/*.svg
icons/lobe/*.svg
icons/lucide/*.svg
icons/simple/*.svg

Performance na CDN

Para uso nos sites, a quantidade de SVGs existentes na pasta da CDN quase não importa. O navegador só baixa o JS/CSS e os SVGs usados na página. O que pesa é: quantidade de ícones renderizados na página, tamanho de cada SVG, latência/CDN/cache e uso do catálogo com manifest.json. Por isso, em produção, evite carregar o catálogo; use apenas as classes dos ícones necessários.