public/assets/images/gulpfile.js
var gulp = require('gulp');
var gutil = require('gulp-util');
var rename = require('gulp-rename');
var svgstore = require('gulp-svgstore');
var svgmin = require('gulp-svgmin');
var cheerio = require('cheerio');
var gcheerio = require('gulp-cheerio');
var through2 = require('through2');
var path = require('path');
var iconsource = 'icons/*.svg'
function build(cb) {
gulp
.src(iconsource)
.pipe(rename({prefix: 'icon-'}))
.pipe(svgmin(function getOptions(file){
var prefix = path.basename(
file.relative,
path.extname(file.relative)
);
return {
plugins: [
{
removeViewBox: false,
removeTitle: false,
cleanupIDs: {
prefix: prefix + '-',
minify: true
}
},
],
js2svg: {
pretty: true,
},
}
}))
.pipe(gcheerio({
run: function ($) {
// remove green-screen color
$('[fill="#50E3C2"]').removeAttr('fill').parents('[fill="none"]').removeAttr('fill');
$('[fill="#BD0FE1"]').attr('fill', 'currentColor').parents('[fill="none"]').removeAttr('fill');
// color in Sketch changed slightly BD0FE1 -> BD10E0
$('[fill="#BD10E0"]').attr('fill', 'currentColor').parents('[fill="none"]').removeAttr('fill');
},
parserOptions: { xmlMode: true }
}))
.pipe(svgstore())
.pipe(through2.obj(function (file, encoding, cb) {
// Side effect: generate app/assets/stylesheets/svg-dimensions.css with
// information about the available icon sizes.
var $ = cheerio.load(file.contents)
var data = $('svg > symbol').map(function (_i, tag) {
var viewBox = tag.attribs.viewbox.split(" ")
return [
'.'+ $(this).attr('id') + ' {' +
' width: ' + viewBox[2] + 'px;' +
' height: ' + viewBox[3] + 'px; ' +
'}'
];
}).get();
var cssFile = new gutil.File({
path: '../../../app/assets/stylesheets/svg-dimensions.css',
contents: Buffer.from(data.join("\n"))
});
this.push(cssFile);
this.push(file);
cb();
}))
.pipe(gulp.dest('./'));
cb();
}
exports.default = function(cb) {
gulp.watch(iconsource, build);
cb();
}
exports.build = build