Icon Pipeline

> The no nonsense icon pipeline

Optimizes svg icons and creates SVG sprites for tags.

Automatically optimize SVGs and build icon sprite for use in HTML or in JS.

Install

``
npm install icon-pipeline
`

Usage

Include icon-pipeline as a dev dependency and call it during your build process.

Here is an example:

`js
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.

$3

So for example, the src directory (srcDir) of unoptimized SVG icons looks like:

`
src/icons/
├── profile.svg
├── github.svg
└── facebook.svg
`

$3

The 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 svg
`

How to reference sprite icons

There are a couple different ways you can reference your newly created icon sprite.

$3

Include your sprite.svg into your DOM.

`html


















`

$3

Or include the sprite.js into your JS app and inject into the DOM.

`js
import sprite from './icons/sprite'
import addSVGtoDOM from './components/Icon/addSVGtoDOM'
addSVGtoDOM(null, sprite)
`

See the example for how to use with React components.

$3

After 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.

`html



``

Recommended SVG resources

- How to work with SVG icons
- Ways to manage icons in React

SVG tools

- Image to SVG https://github.com/Schniz/svgify
- SVG to font https://github.com/jaywcjlove/svgtofont

Alt packages

- https://github.com/svg-sprite/svg-sprite
- https://github.com/kreuzerk/svg-to-ts
- https://github.com/natemoo-re/astro-icon