jessicamarcus
2/15/2016 - 2:58 AM

node module/gulp task which takes in svg files, and creates .scss file containing variables for each svg (to later insert as data uris)

node module/gulp task which takes in svg files, and creates .scss file containing variables for each svg (to later insert as data uris)

{
  "name": "generate-icon-sass-vars",
  "version": "1.0.0",
  "private": true,
  "devDependencies": {
    "gulp": "^3.8.11",
    "gulp-concat": "^2.6.0",
    "readable-stream": "^2.0.5"
  }
}
var gulp = require('gulp');
var concat = require('gulp-concat');

var iconVars = require('./generateIconVars');

gulp.task('generate-icon-sass-vars', function () {
    gulp.src(['icons/status/edit.svg', 'icons/vitals/activity.svg', 'icons/vitals/blood-pressure.svg'])
        .pipe(iconVars('$icon-inline-'))
        .pipe(concat('_inline-icons.scss'))
        .pipe(gulp.dest('scss/common/elements/'))
});
var Transform = require('readable-stream/transform');

module.exports = function (sassVarNamePrefix) {
    var eol = '\';\n';

    var replacements = [
        [/>(\s+)</g, '><'],
        [/path/g, 'path fill=\"FillColor\" stroke=\"StrokeColor\"']
    ];

    return new Transform({
        objectMode: true,
        transform: function (file, enc, callback) {
          
            // pull in the contents of our source file, transform to string
            var currentContents = String(file.contents);

            // create the variable name
            var fileName = sassVarNamePrefix + file.path.match(/([^/]+$)/)[0].split('.')[0] + ': \'';

            // run through each of our replacement tasks
            replacements.forEach(function (replacement) {
                currentContents = currentContents.replace(new RegExp(replacement[0]), replacement[1]);
            });

            // put it all together
            currentContents = fileName + currentContents + eol;

            // return our modified content as a buffer
            file.contents = new Buffer(currentContents);

            // and send it on its way
            this.push(file);
            return callback();
        }
    });
};