diff --git a/index.js b/index.js index eadc7eb..a035f89 100644 --- a/index.js +++ b/index.js @@ -1,6 +1,7 @@ 'use strict'; var cheerio = require('cheerio'), + events = require('events'), fs = require('fs'), gutil = require('gulp-util'), mkdirp = require('mkdirp'), @@ -76,10 +77,14 @@ var spriteSVG = function(options) { width: 0, imgName: options.imgName }, + eventEmitter = new events.EventEmitter(), self, x = options.x, y = options.y; + // When a template file is loaded, render it + eventEmitter.on("loadedTemplate", renderTemplate); + // Generate relative em/rem untis from pixels function pxToRelative(value) { return value / options.pixelBase; @@ -98,7 +103,7 @@ var spriteSVG = function(options) { dest: dest }; - renderTemplate(file, cb); + eventEmitter.emit("loadedTemplate", file, cb); }); } @@ -112,17 +117,23 @@ var spriteSVG = function(options) { // For each sprite for (var i in data.sprites) { - var sprite = data.sprites[i], - // Create, initialise and populate an SVG - $svg = $('') - .attr({ - 'height': sprite.h, - 'viewBox': sprite.viewBox, - 'width': sprite.w, - 'x': Math.ceil(sprite.fit.x)+options.padding, - 'y': Math.ceil(sprite.fit.y)+options.padding - }) - .append(sprite.file); + var sprite = data.sprites[i]; + // Create, initialise and populate an SVG + var spriteAttr = { + 'height': sprite.h, + 'viewBox': sprite.viewBox, + 'width': sprite.w, + 'x': Math.ceil(sprite.fit.x)+options.padding, + 'y': Math.ceil(sprite.fit.y)+options.padding + }; + + if (sprite.fill){ + Object.assign(spriteAttr, {'fill': sprite.fill}); + } + + var $svg = $('') + .attr(spriteAttr) + .append(sprite.file); // Check and set parent SVG width if(sprite.fit.x+sprite.w+options.padding>data.width) { @@ -168,15 +179,21 @@ var spriteSVG = function(options) { sprite.y = y+options.padding; // Create, initialise and populate an SVG + var svgSpriteAttrs = { + 'height': sprite.h, + 'viewBox': sprite.viewBox, + 'width': sprite.w, + 'x': Math.ceil(sprite.x), + 'y': Math.ceil(sprite.y) + }; + + if (sprite.fill) { + Object.assign(svgSpriteAttrs, {'fill': sprite.fill}); + } + var $svg = $('') - .attr({ - 'height': sprite.h, - 'viewBox': sprite.viewBox, - 'width': sprite.w, - 'x': Math.ceil(sprite.x), - 'y': Math.ceil(sprite.y) - }) - .append(sprite.file); + .attr(svgSpriteAttrs) + .append(sprite.file); // Round up coordinates sprite.h = Math.ceil(sprite.h); @@ -250,6 +267,10 @@ var spriteSVG = function(options) { w: parseFloat(width) }; + if ($file.attr('fill') !== undefined) { + Object.assign(sprite, {fill: $file.attr('fill')}); + } + // Add the sprite to our array data.sprites.push(sprite); @@ -275,6 +296,7 @@ var spriteSVG = function(options) { // Render our template and then save the file function renderTemplate(file, cb) { var compiled = mustache.render(file.contents, file.data); + mkdirp(path.dirname(file.dest), function(){ fs.writeFile(file.dest, compiled, cb); }); diff --git a/package-lock.json b/package-lock.json index 4bd6ea0..ea8a647 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "gulp-svg-spritesheet", - "version": "0.0.5", + "version": "0.0.6", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 8965324..b71efe2 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "gulp-svg-spritesheet", "description": "Gulp SVG sprite sheet generator", - "version": "0.0.5", + "version": "0.0.6", "author": "Darren Hall ", "contributors": [ {