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 que sean escalados sin pérdida de calidad, también son muy ligeros.
Tienen la ventaja de poder ser personalizados con CSS y manipulados con JavaScript, lo que los convierte en una opción poderosa para diseñadores y desarrolladores web. Sin embargo, el problema principal (al menos para mí) es su código, el cual suele ser muy extenso y hoy quiero compartir contigo este proyecto en donde abordé precisamente esto.
Problemas de iconos SVG
Pase mucho tiempo haciendo pruebas con las distintas formas de implementar SVG y aunque no obtuve resultados que se puedan considerar malos, siempre había un problema.
Inline SVG
Esta implementación carga rápido, pero el código es muy extenso, lo que en consecuencia resulta difícil de manipular y además provoca que el código fuente sea demasiado largo.
Symbol Sprite
Este método es más manejable y limpio, pero no me hacía gracia que todos los iconos estuvieran en el código fuente y que se cargaran aunque no se usen.
External symbol sprite
Al alojar sprites en un servidor externo y luego llamarlos, solucionaba ambos casos anteriores, pero ahora tenía FOUT es decir, el lugar del icono será tomado por un espacio en blanco hasta que haya cargado.
Podría hablar más sobre esto y todo lo que estuve probando, pero mejor te dejo este fantástico artículo de Tyler Sticka que aborda el mismo tema en su blog Cloudfour.
Mis propios iconos
En este punto estaba decidido a usar SVG en línea y diseñar los iconos por mi cuenta, aunque no me encontraba motivado en hacer esto, ya que significaba hacer todos de cero, un proceso largo de aprendizaje y corrección, pero mientras más rápido empezaba mejor.
Decisiones inteligentes
Si usas una herramienta para diseñar vectores, el resultado a escala de código puede ser desfavorable, pero al desarrollar con SVG puro, eres tú el que toma las decisiones óptimas, para ahorrar trazos y puntos de ancla.
Optimizar aún más
He dejado tareas en el repositorio que tras ejecutarlas, toman todos los iconos en la carpeta "icons", se agregan los atributos por defecto, se optimizan con SVGO y se crean variantes para desarrolladores que espero expandir más si hay apoyo.
Mejoras tras cada revisión
Aunque he empezado en el repositorio con la versión 1.0, lo cierto es que localmente estos iconos pasaron por muchas revisiones, en donde lograba mejorar el diseño y optimización gracias a la experiencia que iba adquiriendo.
Mi meta es seguir mejorando el diseño y consistencia de los iconos, pero también crearé más según lo vea necesario y si los usuarios así lo requieren.
Como usar
En el repositorio encontrarás distintas formas de implementar los iconos en tus proyectos, siendo la más fácil visitando la página de demostración y copiar el que quieras, pero antes de eso necesitarás agregar un pequeño código css a tu web:
.i {
stroke-width: var(--i-stroke,2);
width: var(--i-size,20px);
height: var(--i-size,20px);
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
}
El código anterior no es necesario si descargas el icono, tampoco si estas usando mis trabajos, ya que todos están disponibles en los temas que comparto y solo necesitarás copiar el nombre. La mejor parte es que los iconos que no utilices no cargarán.
Conclusión
He nombrado este pack de iconos “Meteor icons” y es de código abierto por lo tanto, siéntete libre de usarlo sin limitaciones. Cualquier sugerencia, consejo u oportunidad de mejoras que quieres compartir conmigo, estaré encantado de leerla. Muchas gracias por pasar y leer.
