icon-pipeline

v0.1.4

Published

a year ago

No nonsense icon build pipeline

Downloads

1,381

0High
0Medium
0Low

davidwells

icons svg optimization sprite

Icon Pipeline

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.

Install

npm install icon-pipeline

Usage

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

Input

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

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

Output

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.

Vanilla HTML

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>

Javascript

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` tag

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.

<svg>
  <use xlink:href="#facebook"></use>
</svg>

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Icon Pipeline

Install

Usage

Input

Output

How to reference sprite icons

Vanilla HTML

Javascript

use tag

Recommended SVG resources

SVG tools

Alt packages

`use` tag