grunt-svgstore

THIS IS A FORK OF grunt-svgstore. In most cases it's better to use the upstream package.

> Merge SVGs from a folder.

Why?

Because Chris Coyier asked.

Getting Started

This plugin requires Grunt ~0.4.5

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');

Screencast

Chris made a screencast, using grunt-svgstore in a real project, you can find it here.

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 add and overide the the default xmlns="https://www.w3.org/2000/svg" attribute to the resulting SVG
        viewBox : '0 0 100 100',
        xmlns: 'https://www.w3.org/2000/svg'
      }
    },
    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.svg

Type: Object
Default value: {}

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

{
  viewBox: '0 0 100 100'
}

will result in:

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

options.symbol (since 0.2.4)

Type: Object
Default value: {}

Just like options.svg but will add attributes to each generated <symbol>.

options.formatting (since 0.0.4)

Type: Object or boolean
Default value: false

Formatting options for generated code.

To format the generated HTML, set formatting with options like: {indent_size : 2}, which in context looks like:

default: {
  options: {
    formatting : {
      indent_size : 2
    }
  }

See js-beautify for more options.

options.includedemo (since 0.3.5)

Type: boolean|string|function
Default value: false

This will include a demo HTML (named like destName + -demo.html) from where you can copy your `` blocks.

The default template used looks like:

</symbol></svg>
    <style>
      svg{
       width:50px;
       height:50px;
       fill:black !important;
      }
    </style>
  
  
    {{{svg}}}

    {{#each icons}}
        <svg>
          
        </svg>
    {{/each}}

  

Since 0.3.5 you can customise this by passing in a string that will be compiled via handlebars and used as a tempalte. If it is a function this function is expeced to take one parameter and return a string.

The data passed to the template looks like this:

{
  svg : '[raw HTML of the generated svg]',
  icons : [
    name : 'name of an item',
    title : 'extracted title or name'
  ]
}

options.cleanup (since 0.2.6)

Type: boolean or Array Default value: false

This option can be used to clean up inline definitions that may jeopardise later CSS-based styles.
When set to true clean up all inline style attributes.
Apart from true / false, the value of this property can be an array of inline attributes ( like fill, stroke, ...) you want to remove from the elements in the SVG.

options.cleanupdefs (since 0.3.0)

Type: boolean
Default value: false

When set to false, no cleanup is performed on the `