Migrating a legacy sprite sheet nobody could rebuild

The setup

The sprite shipped fine — it just couldn't be taken apart

Who

Priya, a frontend engineer leading a component migration on a long-lived web app.

Stack

React + TypeScript, Vite, an SVGR pipeline for new icons. The old icons lived in one sprite.svg with <symbol> defs.

The job

Turn ~30 sprite symbols into individual .svg files to feed through SVGR and ship as typed components.

The wall

Each icon on screen was a <use href="#icon-x"> pointer. Saving the pointer gives you nothing. The generator was gone.

What wasn't working

“Downloading the sprite file itself gives you one big document full of <symbol> elements with no viewBox on the outside and no way to render a single one on its own. I started splitting it by hand in an editor — copy a symbol, wrap it in a fresh <svg>, port the viewBox off the symbol, hope I got the right one. It's fiddly and it's exactly the kind of thing you make a silent mistake in.”

The <use> indirection is precisely what makes sprites efficient in the browser and painful to extract. The rendered icon is real; the thing you can grab is a reference to a fragment.

The switch

Priya ran SVG Downloader on a page that used the icons. Instead of handing over the <use> pointers, it resolved each same-document sprite reference back to the underlying <symbol> geometry and rebuilt it as a standalone, renderable SVG — viewBox intact, namespace repaired.

detect → zip

“The previews were the confidence check. I paged through and every symbol was there, rendering on its own — not a broken reference, the actual icon. Then Download All as ZIP gave me the whole set, de-duplicated so the icons that appeared five times on the page didn't come down five times. I unzipped it straight into src/icons/ and ran SVGR over the folder.”

The result

• ~30 symbolsresolved from <use> to standalone SVG in one ZIP
• De-duplicatedicons used many times on the page came down once
• SVGR-readycorrect viewBox and xmlns, straight into the pipeline

What did the work

The sprite / <use> extractor to resolve references, then Download All as ZIP for the whole set at once.

Why the raw sprite fails

A downloaded sprite.svg is a bag of <symbol> defs with no standalone rendering — splitting it by hand loses viewBoxes and invites transcription errors. See download all as ZIP.

Scope

Resolves same-document sprite references. External sprite files the page never loads into the DOM aren't reachable — open a page that actually uses the icons.

Composite story — an illustrative but representative workflow. The person and team are fictional; the extension's behaviour described here is real. More stories →