SVGBOX

He estado diciendo durante años que un sistema de íconos bastante bueno consiste simplemente en colocar íconos en línea svgdonde los necesite. Esto es fácil de hacer, ofrece control total del diseño, tiene (generalmente) un buen rendimiento y significa que no estás jugando con el almacenamiento en caché y el soporte del navegador.

En ese sentido… usar imgtampoco es la peor idea para los íconos. No ofrece tanto control de diseño detallado (aunque aún puedes filterhacerlo) y podría decirse que no es tan rápido (ya que las imágenes deben recuperarse por separado del documento), pero aún tiene muchas de las mismas ventajas. como iconos SVG en línea.

Shubham Jain tiene un proyecto llamado SVGBOX que ofrece íconos como imgy elimina una de las limitaciones de control de diseño al ofrecer un parámetro de URL para cambiar los colores.

¿Quieres un ícono de Instagram, pero en rojo? Aconteció en red:

Si va a utilizar varios íconos, el código proporcionado para copiar y pegar ofrece una versión de “sprite SVG” donde la URL es así:

img src="//s.svgbox.net/social.svg?fill=805ad5#instagram"

Esto aumentará el peso de descarga del ícono (porque descarga todos los íconos de este conjunto), pero posiblemente sea más eficiente ya que es una descarga única, no muchas. Es difícil decir si eso es más eficiente o no hoy en día, con HTTP/2 alrededor.

Lo interesante es la #instagramparte al final de la URL. Sólo un enlace hash, ¿verdad? ¡No! ¡Criador! En SVG, puede ser un identificador de fragmento, lo que significa que solo mostrará el bit del SVG que coincide con el viewelemento adecuado. No veo eso todos los días.