Uma biblioteca de ícones não é apenas uma pasta cheia de SVGs. Para ser fácil de manter, ela precisa de nomes consistentes, espessuras previsíveis, uma forma clara de importação e regras de acessibilidade.
O Icons Creator gera um pacote com CSS, manifests JavaScript e TypeScript e arquivos separados por estilo. A estrutura pode ser usada globalmente ou importada somente nos componentes que precisam dela.
Padronize nomes e variações
Use nomes sem espaços e sem acentos, de preferência em kebab-case. Evite nomes genéricos como icon-1 ou new-icon. O nome deve representar o significado funcional, por exemplo user-add, warning-circle ou download.
Quando houver espessuras, mantenha a mesma lista para todos os ícones. Isso evita que um componente peça uma variação que não existe.
Escolha entre instalação global e importação local
A instalação global é conveniente quando dezenas de telas compartilham o mesmo conjunto. O CSS é carregado uma vez na entrada da aplicação e os componentes usam apenas classes. A importação local reduz o escopo e pode ser melhor em aplicações pequenas ou com rotas muito separadas.
Não misture os dois modelos sem necessidade. Defina uma convenção para o projeto e documente onde os arquivos extraídos devem ficar.
// Vue / Quasar - instalação global
import './assets/icons-library/icons.css'
// JSX / templates
<span class="ic ic-download ic-regular" aria-hidden="true"></span>Integração por framework
Em Vue, Nuxt e Quasar, registre o CSS no arquivo de entrada ou na configuração global. Em React e Next.js, importe o CSS no entrypoint permitido pelo framework. Em Angular, inclua o arquivo na lista styles ou no styles.scss. Em Svelte e SvelteKit, importe no layout raiz ou no componente.
Quando a biblioteca for usada em um pacote distribuído, exponha também um manifest TypeScript. Ele melhora autocomplete e reduz erros de digitação nos nomes.
Aplique acessibilidade de acordo com a função
Ícones decorativos devem usar aria-hidden="true" para não gerar ruído em leitores de tela. Quando o ícone é a única identificação de um botão, o botão precisa de aria-label ou texto visualmente oculto. Não dependa apenas da cor para indicar sucesso, erro ou alerta.
- Botão com apenas ícone: forneça um nome acessível.
- Ícone junto de um texto equivalente: marque o ícone como decorativo.
- Ícone informativo sem texto: use role="img" e aria-label.
- Mantenha contraste e área de toque adequados.
Evite bibliotecas maiores do que o necessário
Carregar uma fonte com milhares de glifos para usar cinco ícones aumenta o custo inicial e pode bloquear a renderização. SVGs importados individualmente ou um pacote gerado apenas com os ícones usados costuma ser mais eficiente.
Revise periodicamente o conjunto e remova arquivos que não aparecem mais no produto. A biblioteca deve evoluir junto com o sistema de design.