Icon Pipeline is a build tool for optimizing SVG icons and producing SVG sprites.
It is a focused example of developer experience work: take a repetitive frontend asset workflow and turn it into a reliable pipeline.
Design systems and product UIs need icon workflows that are easy to run, review, and reuse. This project packages that pipeline as a tool.
Full documentation, synced from the package README:
The no nonsense icon pipeline
Optimizes svg icons and creates SVG sprites for <use> tags.
Automatically optimize SVGs and build icon sprite for use in HTML or in JS.
npm install icon-pipelineInclude icon-pipeline as a dev dependency and call it during your build process.
Here is an example:
const path = require('path')
const iconPipeline = require('icon-pipeline')
const iconSrcFolder = path.join(__dirname, 'src', 'icons')
const iconOutputFolder = path.join(__dirname, 'build', 'icons')
/* Generate optimized SVGs and icon sprite */
iconPipeline({
// Location of non optimized svg icons
srcDir: iconSrcFolder,
// Output directory for optimized svg icons & svg sprite
outputDir: iconOutputFolder,
// Includes the sprite.js && sprite.svg in original icon directory
includeSpriteInSrc: true,
// Turn off additional svg classes added for advanced styling
/* disableClasses: true, */
// Namespace of icon IDs. Will prefix icon names. Example 'foo.svg' will become 'company-foo'
/* namespace: 'company' */
}).then((iconData) => {
console.log('iconData', iconData)
})
console.log(iconData)See make-icons.js file for a working example of this.
So for example, the src directory (srcDir) of unoptimized SVG icons looks like:
src/icons/
├── profile.svg
├── github.svg
└── facebook.svgThe output directory (outputDir) of icons will result in:
build/icons/
├── sprite.svg <-- SVG sprite for usage in HTML
├── sprite.js <-- SVG sprite for usage in javascript
├── icon-list.js <-- manifest of all available icons
├── profile.svg <-- optimized svg
├── github.svg <-- optimized svg
└── facebook.svg <-- optimized svgThere are a couple different ways you can reference your newly created icon sprite.
Include your sprite.svg into your DOM.
<!doctype html>
<html>
<head></head>
<body>
<div>Your app</div>
<!-- Include the sprite -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="position:absolute; width: 0; height: 0">
<symbol viewBox="0 0 24 24" id="facebook">
<path d="M18.768 7.465Hl.417-4z..."></path>
</symbol>
<symbol viewBox="0 0 24 24" id="github">
<path d="M12 0C5.374 0 0 5.373..."></path>
</symbol>
</svg>
</body>
</html>Or include the sprite.js into your JS app and inject into the DOM.
import sprite from './icons/sprite'
import addSVGtoDOM from './components/Icon/addSVGtoDOM'
addSVGtoDOM(null, sprite)See the example for how to use with React components.
use tagAfter your sprite is in the DOM, you can reference icons with the use tag and the ID of the icon. #facebook here is the name of the icon file.
<svg>
<use xlink:href="#facebook"></use>
</svg>