Newton's Poleless Magnet
Have opinions about JavaScript? We want to hear them. Take the 2018 JavaScript Ecosystem Survey »

grunt-svgtemplater

0.1.4 • Public • Published

Include and combine SVG files into your HTML to reference them as SVG templates. Chris Coyier explains this mechanism nicely on his blog CSS-Tricks

Getting Started

If you haven't used grunt before, be sure to check out the Getting Started guide, as it explains how to create a gruntfile as well as install and use grunt plugins. Once you're familiar with that process, install this plugin with this command:

npm install --save-dev grunt-svgtemplater

Overview

This task looks through your projects image directory for SVG files, extracts their content, wraps it into individual SVG groups with id="svg-[filename]" and writes these new groups into your HTML file so you can reference them as templates throughout your site like this:

<svg viewBox="0 0 1024 1024">
  <use xlink:href="#svg-[filename]">
</svg>

Include <svg id="svgtemplater"></svg> in your destination HTML file where you want the combined SVG groups to go. It'll be decorated with style display: none; automatically so you don't end up with a mess of SVGs somewhere on your site.

Example Task

grunt.initConfig({
    mytask: {
      src: 'img/**/*.svg',
      dest: 'index.html'
    }
  }
});

License

MIT

install

npm i grunt-svgtemplater

Downloadsweekly downloads

9

version

0.1.4

license

none

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability