DavidWells / icon-pipeline

🚚 SVG icon pipeline - Optimize icons & build SVG sprites

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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>

Recommended SVG resources

SVG tools

Alt packages

About

🚚 SVG icon pipeline - Optimize icons & build SVG sprites


Languages

Language:JavaScript 88.8%Language:HTML 6.3%Language:CSS 2.5%Language:Pug 2.4%