Una biblioteca de iconos es más que una carpeta de SVG. Necesita nombres consistentes, pesos previsibles, una estrategia de importación clara y reglas de accesibilidad.
Icons Creator genera CSS, manifests JavaScript y TypeScript y archivos por cada peso. El paquete puede instalarse globalmente o importarse solo donde sea necesario.
Estandariza nombres y variantes
Usa nombres sin espacios ni acentos, preferiblemente kebab-case. Evita nombres genéricos como icon-1. El nombre debe describir la función: user-add, warning-circle o download.
Mantén la misma lista de pesos para todos los iconos para evitar variantes inexistentes.
Elige instalación global o local
La instalación global funciona bien cuando muchas pantallas comparten el conjunto. El CSS se carga una vez. La importación local reduce el alcance y puede ser mejor en aplicaciones pequeñas.
No mezcles ambos modelos sin motivo. Documenta la convención y la ruta de los archivos.
// Vue / Quasar - instalación global
import './assets/icons-library/icons.css'
<span class="ic ic-download ic-regular" aria-hidden="true"></span>Integra según el framework
En Vue, Nuxt y Quasar, registra el CSS en la entrada o configuración global. En React y Next.js, impórtalo en el punto permitido. En Angular, añádelo a styles. En Svelte y SvelteKit, usa el layout raíz o el componente.
Un manifest TypeScript mejora el autocompletado y reduce errores en los nombres.
Aplica accesibilidad según la función
Los iconos decorativos deben usar aria-hidden="true". Si el icono es la única etiqueta de un botón, el botón necesita aria-label o texto oculto. No uses solo color para comunicar estados.
- Botón con solo icono: añade un nombre accesible.
- Icono junto a texto equivalente: ocúltalo a tecnologías de asistencia.
- Icono informativo independiente: usa role="img" y aria-label.
- Mantén contraste y área táctil adecuados.
Evita bibliotecas demasiado grandes
Cargar una fuente con miles de glifos para usar cinco iconos aumenta el costo inicial. SVG seleccionados o un paquete que contenga solo lo utilizado suele ser más eficiente.
Revisa periódicamente la biblioteca y elimina recursos que ya no aparecen en el producto.