Historia — ingeniería frontend
Migrar una hoja de sprites heredada que nadie podía reconstruir
«Íbamos a pasar a componentes de icono individuales. El problema: los iconos actuales eran un único sprite SVG, referenciado por todas partes con <use>, y el paso de compilación que lo generaba se había borrado hacía dos refactorizaciones. Teníamos el sprite en producción y nada que lo hiciera.»
El punto de partida
El sprite funcionaba bien; simplemente no se podía desmontar
Lo que no funcionaba
«Descargar el propio archivo de sprite te da un documento enorme lleno de elementos <symbol> sin viewBox por fuera y sin manera de dibujar uno solo por su cuenta. Empecé a partirlo a mano en un editor —copiar un símbolo, envolverlo en un <svg> nuevo, trasladar el viewBox desde el symbol, esperar haber cogido el correcto—. Es engorroso y es justo el tipo de cosa en la que cometes un error silencioso.»
La indirección de <use> es precisamente lo que hace los sprites eficientes en el navegador y dolorosos de extraer. El icono dibujado es real; lo que puedes coger es una referencia a un fragmento.
El cambio
Priya ejecutó SVG Downloader en una página que usaba los iconos. En vez de entregar los punteros <use>, resolvió cada referencia de sprite del mismo documento de vuelta a la geometría del <symbol> subyacente y la reconstruyó como SVG independiente y dibujable, con el viewBox intacto y el espacio de nombres reparado.
«Las vistas previas fueron la comprobación de confianza. Las recorrí y cada símbolo estaba ahí, dibujándose por su cuenta: no una referencia rota, el icono de verdad. Luego Descargar todo en ZIP me dio el conjunto entero, sin duplicados, así que los iconos que aparecían cinco veces en la página no bajaron cinco veces. Lo descomprimí directamente en src/icons/ y pasé SVGR sobre la carpeta.»
«El sprite era el único recurso de toda la migración que creíamos que necesitaría una reconstrucción manual. Se convirtió en un paso de importación. El resto del día se fue en el trabajo de React de verdad.»
— Priya Nandakumar, ingeniera frontendEl resultado
- ~30 símbolosresueltos de
<use>a SVG independiente en un solo ZIP - Sin duplicadoslos iconos usados muchas veces en la página bajaron una vez
- Listo para SVGRviewBox correcto y
xmlns, directo a la tubería
- Qué hizo el trabajo
- El extractor de sprites /
<use>para resolver las referencias, y luego Descargar todo en ZIP para el conjunto entero de una vez. - Por qué falla el sprite en bruto
- Un
sprite.svgdescargado es un saco de definiciones<symbol>sin dibujo independiente; partirlo a mano pierde viewBoxes e invita a errores de transcripción. Ver descargar todo en ZIP. - Alcance
- Resuelve las referencias de sprite del mismo documento. Los archivos de sprite externos que la página nunca carga en el DOM no son alcanzables: abre una página que use los iconos de verdad.
Historia compuesta: un flujo ilustrativo pero representativo. La persona y el equipo son ficticios; el comportamiento de la extensión aquí descrito es real. Más historias →
Resuelve el sprite y sáltate la reconstrucción
Convierte las referencias <use> de vuelta en SVG independiente y dibujable: el conjunto entero en un ZIP.