hbs-svg

Generate Handlebars helpers for optimised inline SVG.

Usage no npm install needed!

<script type="module">
  import hbsSvg from 'https://cdn.skypack.dev/hbs-svg';
</script>

README

hbs-svg

Build Status NPM version

Generate Handlebars helpers for optimised inline SVG. The optimised SVG files are also saved for those situations where you don't want an inline SVG (e.g. background image).

Usage: hbs-svg [source dir] {OPTIONS}

Examples:
  hbs-svg src/ --hf build/helpers.js --if build/

Options:
  --hf, --helper-file   Write the handlebars helpers to this file  [required]
  --if, --image-folder  Write the optimised images to this folder  [required]

Installation

$ npm install -g hbs-svg

Examples

To optimise SVG files from src/, outputting Handlebars helpers to build/helpers.js and optimised SVG files to build/:

$ hbs-svg src/ --hf build/helpers.js --if build/

You can use the API directly too:

var hbsSvg = require('hbs-svg');

hbsSvg({
  sourceDir: './src',
  helperFile: './build/helpers.js',
  imageFolder: './build'
}, function(){
  console.log('done');
});

Tests

$ npm test

Credits

The idea for this tool was based on this article by @madrobby.