finds.dev← search

// the find

una/svg-icon-system-boilerplate

★ 258 · HTML · MIT · updated Oct 2016

A boilerplate for building a custom icon system via a linked external SVG sprite

A Gulp-based workflow from 2016 for bundling individual SVG files into a single sprite using the `<symbol>` + `<use>` pattern. Aimed at developers who want to maintain SVGs as separate files and reference them via external sprite. The technique is sound but the tooling is a decade stale.

The `<symbol>`/`<use>` sprite approach itself is still valid and works without JavaScript. Subfolder namespacing (`folderName--iconName`) is a sensible convention for organizing large icon sets. The pattern of keeping source SVGs as individual files and building the sprite via a task runner is still the right architecture.

Last touched in 2016 — Gulp 3, `xlink:href` (deprecated in SVG 2.0, removed in Chrome 100+), and a `package.json` full of abandoned packages. Modern projects would use Vite/Rollup plugins, SVGR, or a CSS framework's icon system instead. There's no optimization step (SVGO or similar), so raw designer SVGs go straight into the sprite with all their cruft. With 258 stars and zero activity, no one is maintaining or updating this; adopting it means inheriting the full migration cost upfront.

View on GitHub →

// want more like this?

We dig through GitHub every week and send a few repos picked for what you actually care about — each with an honest take like this one.

Get finds in your inbox → Search again →