Los iconos SVG son una forma popular y versátil de agregar gráficos vectoriales a un sitio web. A diferencia de las imágenes como JPEG o PNG, los SVG se basan en código XML que permite escalarlos sin pérdida de calidad y mantenerlos muy ligeros. También se pueden personalizar con CSS y manipular con JavaScript, lo que los convierte en una opción poderosa para diseñadores y desarrolladores web.
Pero hay algo que casi nadie habla cuando recomienda una librería de iconos, y eso es la calidad del código SVG en sí mismo. Y eso es precisamente de lo que va este proyecto.
El problema que nadie resuelve del todo
La mayoría de librerías de iconos pasan por el mismo proceso, en donde alguien diseña una forma en Illustrator, Figma o cualquier herramienta vectorial, exporta el SVG, lo pasa por un optimizador automático como SVGO y lo publica. El resultado es un icono visualmente correcto, pero no necesariamente limpio.
Los optimizadores automáticos tienen un techo. Pueden eliminar redundancias evidentes, pero no pueden razonar sobre lo que un trazo intenta dibujar, y como resultado tenemos puntos de control que podrían ser puntos de anclaje, arcos expresados como curvas Bézier, coordenadas con seis decimales, segmentos de path que podrían ser una línea recta. Ninguna diferencia visual, pero el peso es real.
Un enfoque distinto basado en decisiones humanas
Decidí diseñar mis propios iconos directamente a nivel de código SVG, sin pasar por ninguna herramienta de diseño vectorial como punto de partida. Eso significa mirar los comandos del path directamente y preguntarse si cada uno es la mejor forma de dibujar lo que se necesita.
A veces un arco reemplaza cuatro curvas. A veces una coordenada se simplifica a un número redondo. A veces dos paths colapsan en uno. El resultado es código SVG que no podría hacerse más pequeño sin cambiar lo que dibuja. Esto no lo hace un optimizador automático, es puramente trabajo con esfuerzo, ingenio y razonamiento humano.
Lo puedes ver tú mismo
En la página de documentación puedes revisar tu mismo como está construido cada icono. Las decisiones estructurales son visibles, no solo declaradas.
Mejoras con cada revisión
Los iconos no se publican y se olvidan. Los más antiguos del set fueron diseñados antes de que el estándar actual estuviera completamente establecido, y se están revisando uno a uno para llevarlos al mismo nivel.
La consistencia visual y la optimización a veces compiten entre si, ya que una forma visualmente coherente con el resto del set puede requerir un path menos eficiente que uno dibujado de forma aislada. El objetivo es resolver esas tensiones de forma deliberada, no por defecto hacia ninguno de los dos extremos.
Cómo usarlo
La forma más rápida es visitar la página de documentación, elegir el icono que necesitas y copiar el SVG directamente. Si quieres integrarlo como librería en tu proyecto, hay paquetes disponibles para Astro, React, Preact, Vue, SolidJS y Svelte.
Si usas alguno de mis temas, ya está incluido y solo necesitas copiar el nombre del icono. Los iconos que no uses no cargan, así que no hay peso innecesario.
Conclusión
Meteor Icons es de código abierto y libre de usar sin limitaciones. Lo que lo diferencia de otras librerías no es la cantidad de iconos ni el soporte de frameworks, es que cada icono está escrito para ser tan pequeño como sea posible sin sacrificar lo que dibuja. He puesto mucho cariño en este proyecto, y deseo de corazón que te guste tanto como a mí.
