broccoli-svg-sprite
v1.0.6
Published
A broccoli.js plugin for generating svg sprites using node.js svg-sprite module by Joschi Kuphal (https://github.com/jkphl/svg-sprite)
Downloads
11
Maintainers
Readme
broccoli-svg-sprite
The broccoli-svg-sprite plugin provides a wrapper around node.js svg-sprite module which takes a set of svg files, optimizes them and combines them into SVG sprites of several types
Installation
npm install --save-dev broccoli-svg-sprite
Usage
The broccoli-svg-sprite plugin is just a wrapper around the svg-sprite module. To use the plugin in your broccoli project, first import the plugin into your project:
var spriter = require('broccoli-svg-sprite');
Then, just instantiate a new spriter object passing in the appropriate options:
var svgSpriter = new spriter(srcFiles, spriteOptions);
where
srcFiles: is a data object containing:
srcDir: the base directory containing your svg files.
include: An array of inclusion glob patterns to filter files.
exclude: An array of exclusion glob patterns to filter files.
spriteOptions: is a data object that will be passed as such to the svg-sprite module. For a detailed explanation of all available options, refer to https://github.com/jkphl/svg-sprite
Example:
var svgSpriter = new spriter(srcFiles, spriteOptions);
var srcFiles = {
srcDir: 'svgs',
include: ['**/*.svg'],
exclude: []
};
var svgOptions = {
dest: '.',
shape: {
spacing: { // Spacing related options
padding: 1, // Padding around all shapes
box: 'content' // Padding strategy (similar to CSS `box-sizing`)
},
},
mode: {
view: { // Activate the «view» mode
dest: 'assets/images',
bust: false,
render: {
css: {
dest: '../../app/styles/less/sprite.css'
},
scss: false,
styl: false
},
prefix: 'svg-view-id',
sprite: 'cw-svg-views-sprite.svg',
example: false
},
}
};
var spriter = new svgSpriter(srcFiles, svgOptions);
module.exports = mergeTree([app.toTree(), spriter]);
Tests
npm install
mocha test
Acknowledgements
- Joschi Kuphal (https://github.com/jkphl/svg-sprite)
- Robert Jackson https://github.com/rwjblue
- Jo Liss (https://github.com/joliss)