Skip to content

Instantly share code, notes, and snippets.

@morgs32 morgs32/gulpfile.js
Created May 24, 2015

What would you like to do?
This gulp file will create svg iconsets out of material icons to use with $mdIconProvider in angular-material
//to use in angular-material as described here:$mdIconProvider
//the icons you get from bower install material-design-icons
var gulp = require('gulp');
var tap = require("gulp-tap");
var path = require("path");
var fs = require('fs-extra');
var replaceAll = function(s, target, replacement) {
var array = s.split(target);
return array.join(replacement);
gulp.task('default', function() {
var svgs = {};
var stream = gulp.src('client/bower_components/material-design-icons/**/svg/production/*24px.svg')
// Convert file paths like /action/svg/production/ic_account_balance_wallet_24px.svg to /action/account-balance-wallet.svg
.pipe(tap(function(p) {
var dirname = path.relative('.',p.path);
var basename = path.basename(p.path);
console.log(dirname, basename);
dirname = dirname.split("/")[3];
var svg;
if (svgs[dirname])
svg = svgs[dirname];
svg = '<svg>\n';
basename = basename.split('_24px')[0]
// I dont like underscores
basename = replaceAll(basename, '_', '-');
basename = replaceAll(basename, 'ic-', '');
svg = svg + '<g id="'+basename+'">\n';
svg = svg + '\t' + p.contents;
svg = svg + '\n</g>\n';
svgs[dirname] = svg;
stream.on('end', function() {
//run some code here
for (i in svgs) {
var ws = fs.createOutputStream('client/assets/icons/material/'+i+'.svg');
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.