crear un sprite
Suelta tus iconos y obtén un único archivo sprite de elementos symbol, más la línea use de cada icono, lista para pegar.
o haz clic para elegir — hasta 40 archivos SVG
Vista previa
un archivo, una referencia por icono
Cada icono cargado como archivo propio es una petición propia, una entrada de caché propia y una ocasión propia de llegar un fotograma tarde. Un sprite los pliega en un solo documento: cada icono pasa a ser un symbol con su propio viewBox, nada se dibuja por sí mismo y sacas el que necesites con use href="#icon-name". Como la referencia va por id y no por URL, el icono hereda currentColor y el CSS del svg que lo rodea, justo lo que un montón de etiquetas img no puede hacer.
Lo difícil no es envolver, son los nombres. Cuarenta iconos exportados de una herramienta de diseño contendrán encantados cuarenta degradados llamados «a» y cuarenta clases llamadas «cls-1», y en cuanto comparten documento el segundo se lleva en silencio el color del primero. Por eso cada id y cada clase dentro de un icono se renombra con el id de su propio símbolo como prefijo, y los cuatro escondites de una referencia —url() en un atributo, un href que apunta a un fragmento, el atributo style y el CSS dentro de un elemento style— se reescriben igual. Nada se mezcla entre iconos.
tres pasos
Hasta 40 archivos SVG a la vez, analizados en tu navegador. Reordena una fila con las flechas; ese orden es el de los símbolos en el archivo.
Cada símbolo se llama como su archivo con el prefijo delante, y la lista te muestra el resultado. Dos archivos con el mismo nombre reciben un número para que dos símbolos no reclamen un mismo id.
El sprite va dentro de tu página o se sirve como sprite.svg; el fragmento te da una línea lista para pegar por cada icono.
respuestas rápidas
De dos formas. Pega el sprite entero cerca del principio de tu HTML y referencia un icono con use href="#icon-name"; o sirve el archivo y referencia use href="/sprite.svg#icon-name". Lo primero ahorra una petición; lo segundo deja que el navegador cachee un solo sprite para todas las páginas.
Del nombre del archivo, en minúsculas, con todo lo que no sea letra o dígito convertido en guion y el prefijo delante. Así arrow_left.svg con el prefijo por defecto pasa a ser icon-arrow-left.
Un id de XML no puede empezar por un dígito, y nombres como 2-arrow.svg son habituales. El prefijo también evita choques con ids que ya existan en tu página. Puedes cambiarlo o vaciarlo; si al vaciarlo quedara un id inválido, se repone un prefijo de respaldo.
Al segundo se le añade un número. Sin eso, ambos símbolos llevarían el mismo id y cualquier referencia mostraría el primer icono: una imagen equivocada en silencio, no un error.
Sí. Cada id y clase dentro de un icono se renombra con el id de su símbolo como prefijo, y las referencias se reescriben con él: url() en atributos, href a fragmentos, el atributo style y el CSS dentro de un elemento style.
Si el icono usa fill="currentColor", sí: pon color en el svg que contiene la referencia y el icono lo sigue. Los iconos con rellenos fijos los conservan; el sprite no reescribe tus colores.
Hasta 40 de una vez. Un sprite no tiene un límite real propio, pero una hoja mucho mayor suele convenir dividirla por secciones del sitio, para que cada página lleve solo los iconos que usa.
No. Los SVG se analizan y se ensamblan dentro de tu navegador, y la vista previa es una URL de blob de tu propia máquina. Esta herramienta no tiene ningún servidor que pueda recibir un archivo.
Sí: gratis, sin marca de agua y sin registro.