grunt-svgstore

Merge SVGs from a folder.

Why?

Getting Started

This plugin requires Grunt ~0.4.2

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, you may install this plugin with this command:

npm install grunt-svgstore --save-dev

Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:

grunt.loadNpmTasks('grunt-svgstore');

The "svgstore" task

Overview

In your project's Gruntfile, add a section named svgstore to the data object passed into grunt.initConfig().

grunt.initConfig({
  svgstore: {
    options: {
      prefix : 'icon-', // This will prefix each ID
      svg: { // will be added as attributes to the resulting SVG
        viewBox : '0 0 100 100'
      }
    },
    your_target: {
      // Target-specific file lists and/or options go here.
    },
  },
});

Options

options.prefix

Type: String Default value: ''

A string value that is used to prefix each filename to generate the id.

options.str

Type: Object Default value: {}

An object that is used to genreate attributes for the resulting svg file.

{
  viewBox: '0 0 100 100'
}

will result in:

<svg viewBox="0 0 100 100">
[...]

Usage Examples

This example will merge all elements from the svgs folder into the <defs>-Block of the dest.svg. You can use that SVG in HTML like:

<!-- Inlcude dest.svg -->

[...]

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

grunt.initConfig({
  svgstore: {
    options: {},
    files: {
      'dest/dest.svg': ['svgs/*.svg'],
    },
  },
});

Contributing

In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Grunt.

Release History

(Nothing yet)

ginader / grunt-svgstore