Handlebars helper to inline SVGs

Downloads in past


1.0.46 years ago6 years agoMinified + gzip package size for handlebars-helper-inlinesvg in KB


handlebars-helper-inlineSVG :bear:
npm version Build Status Coverage Status Dependency Status
Handlebars helper to inline SVGs


First, add handlebars-helper-inlineSVG as a project dependency using Yarn (or NPM).
yarn add gulp handlebars-helper-inlineSVG

Then register this module as a handlebars helper:
import Handlebars from 'handlebars'; // assumes you have handlebars installed as a project dependency
Handlebars.registerHelper('inlineSVG', inlineSVG);

Then you can inline SVG files from either your local filepaths or from installed packages.

For example to load in a file called `test.svg` which is in a folder called `img` in your project you would include the following in your handlebars template:
{{inlineSVG "img/test.svg"}}
## Load SVG from a module

To inline an SVG from a module you have installed, you simply need to prefix the module name to the filepath within that module that the SVG is located in:
{{inlineSVG "@justeat/f-icons/src/img/icons/arrows/chevron.svg"}}
## Custom Attributes

You can also pass attributes to the root element in your SVG, like so:
{{inlineSVG "img/test.svg" class="myClass" width="100" height="100" }} ```


JavaScript tests are located in the test directory at the root of the project.