mfd/_svg-sprite.scss

## _svg-sprite.scss
.icon {
    fill: currentColor;
}
<% _.each(icons, function(icon) { %>.<%= icon.name %> {
  width: <%= icon.ratio %>em;
  height: 1em;
}
<% }); %>

## icon_font.js
var gulp = require('gulp');
var notify = require('gulp-notify');
var iconfont = require("gulp-iconfont");
var consolidate = require("gulp-consolidate");
var config = require('../config');
var browserSync = require('browser-sync');
reload = browserSync.reload;

var fontname = 'svgfont';
gulp.task('font', function(){
  return gulp.src(config.src.img+'svg/*.svg')
    // .pipe(svgmin())
    .pipe(iconfont({
      fontName: fontname,
      PrependUnicode: true,
      formats: ['ttf', 'eot', 'woff', 'woff2'],
      normalize: true,
      fontHeight: 1001,
      fontStyle: 'normal',
      fontWeight: 'normal'
    }))
    .on('glyphs', function(glyphs, options) {
        console.log(glyphs);
        gulp.src(config.src.helpers+'_svgfont.sass')
            .pipe(consolidate('lodash', {
                glyphs: glyphs,
                fontName: fontname,
                fontPath: 'fonts/',
                className: 'icon'
            }))
            .pipe(gulp.dest(config.src.sass+'lib/'));
        gulp.src(config.src.helpers+'icons.html')
            .pipe(consolidate('lodash', {
                glyphs: glyphs,
                fontName: fontname,
                fontPath: 'fonts/',
                className: 'icon',
                htmlBefore: '<i class="icon ',
                htmlAfter: '"></i>',
                htmlBr: ''
            }))
            .pipe(gulp.dest(config.dest.root));
    })
    .pipe(gulp.dest(config.dest.css+'fonts/'))
    .pipe(reload({stream: true}))
    .pipe(notify("Icon font updated!"));
});

gulp.task('font:watch', function() {
    gulp.watch(config.src.img+'svg/*', ['font']);
});

## icon_svg.js
var gulp         = require('gulp'),
    sass         = require('gulp-sass'),
    browserSync  = require('browser-sync'),
    postcss      = require('gulp-postcss'),
    autoprefixer = require('autoprefixer'),
    svgmin       = require('gulp-svgmin'),
    svgStore     = require('gulp-svgstore'),
    rename       = require('gulp-rename'),
    cheerio      = require('gulp-cheerio'),
    consolidate  = require('gulp-consolidate');

// sprite
gulp.task('sprites', function() {
    return gulp
        .src('src/icons/*.svg')
        .pipe(svgmin({
            js2svg: {
                pretty: true
            },
            plugins: [{
                removeDesc: true
            }, {
                cleanupIDs: true
            }, {
                mergePaths: false
            }]
        }))
        .pipe(rename({ prefix: 'icon-' }))
        .pipe(svgStore({ inlineSvg: false }))
        .pipe(cheerio({
            run: extractDataFromIcons,
            parserOptions: { xmlMode: true }
        }))
        .pipe(rename({ basename: 'sprite' }))
        .pipe(gulp.dest('app/img'));
});

function extractDataFromIcons($, file) {
    // get data about each icon
    var symbols = $('svg > symbol');
    var data = $('svg > symbol').map(function() {
        var $this = $(this);
        var size = $this.attr('viewBox').split(' ').splice(2);
        return {
            name: $this.attr('id'),
            ratio: Math.ceil((size[0] / size[1]) * 10) / 10
        };
    }).get();

    // remove attributes to make possible applying these styles via css
    symbols.each(function() {
        $(this)
            .children()
            .removeAttr('stroke')
            .removeAttr('stroke-width')
            .not('[fill="currentColor"]')
            .removeAttr('fill')
    });

    // create scss file with icon dimensions
    gulp.src('src/assets/sprite/_svg-sprite.scss')
        .pipe(consolidate('lodash', {
            icons: data
        }))
        .pipe(gulp.dest('src/sass'));

    // create preview
    gulp.src('src/assets/sprite/svg-sprite.html')
        .pipe(consolidate('lodash', {
            icons: data
        }))
        .pipe(gulp.dest('app'));
}

## svg-sprite.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>SVG Sprite Preview</title>
  <style type="text/css" media="all">

    h1 {
      text-align: center;
    }

    .icons-list {
      list-style-type: none;
      margin: 0;
      padding: 0;
      font-size: 0;
      text-align: center;
    }

    .icon-box {
      display: inline-block;
      vertical-align: middle;
      min-width: 200px;
      min-height: 200px;
      padding: 20px;
      border-radius: 5px;
    }

    .icon-container {
      min-height: 170px;
      text-align: center;
      font-size: 100px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #CCC;
      border-radius: 5px;
      box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.2);
    }

    input:not([type=range]):not([type=color]) {
      display: inline-block;
      vertical-align: top;
      width: 100%;
      box-sizing: border-box;
      font-size: 12px;
      border-radius: 5px;
      height: 30px;
      padding: 0;
      text-align: center;
      border: 1px solid #CCC;
      box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.2);
      -webkit-appearance: none;
    }

    .configure {
      display: flex;
      flex-direction: column;
      max-width: 300px;
      margin: auto;
    }

    .configure label:first-child input {
      display: block;
      width: 100%;
    }

    .configure label:last-child {
      margin-top: 10px;
      display: flex;
      align-items: center;
    }

    .icon-class-name {
      width: 70%;
    }

    .icon-unicode {
      width: 30%;
    }

    <% _.forEach(icons, function(icon) { %>.<%= icon.name %> {
      width: <%= icon.ratio %>em;
      height: 1em;
    }
    <% }); %>
  </style>
</head>
<body>
  <h1>Icons: <span id="count"></span></h1>

  <div class="configure">
    <label>
      <span>Size: <b><output for="size" id="size-value">100</output></b>px</span>
      <input type="range" id="size" value="100" min="6" max="1000">
    </label>

    <label>
      <span>Color:&nbsp;</span>
      <input type="color" id="color">
    </label>
  </div>

  <ul class="icons-list">
    <% _.forEach(icons, function(icon) { %>
    <li class="icon-box">
      <input class="icon-class-name autoselect" type="text" value=".<%= icon.name %>" readonly>
      <div class="icon-container">
        <svg class="icon <%= icon.name %>">
          <use xlink:href="/img/sprite.svg#<%= icon.name %>"></use>
        </svg>
      </div>
    </li>
    <% }) %>
  </ul>

  <script>
    var change = document.getElementById('size');
    var color = document.getElementById('color');
    var changeVal = document.getElementById('size-value');
    var count = document.getElementById('count');
    var autoselect = document.getElementsByClassName('autoselect');
    var icons = document.getElementsByClassName('icon');

    Array.prototype.forEach.call(autoselect, function(el) {
      el.onclick = function() {
        this.focus();
        this.select();
      };
    });

    change.oninput = function() {
      var val = this.value;
      changeVal.value = val;
      Array.prototype.forEach.call(icons, function(el) {
        el.style.fontSize = val + 'px';
      });
    }

    color.onchange = function() {
      var val = this.value;
      Array.prototype.forEach.call(icons, function(el) {
        el.style.fill = val;
      });
    }

    count.innerHTML = icons.length;
  </script>
</body>
</html>
	.icon {
	fill: currentColor;
	}
	<% _.each(icons, function(icon) { %>.<%= icon.name %> {
	width: <%= icon.ratio %>em;
	height: 1em;
	}
	<% }); %>
	var gulp = require('gulp');
	var notify = require('gulp-notify');
	var iconfont = require("gulp-iconfont");
	var consolidate = require("gulp-consolidate");
	var config = require('../config');
	var browserSync = require('browser-sync');
	reload = browserSync.reload;

	var fontname = 'svgfont';
	gulp.task('font', function(){
	return gulp.src(config.src.img+'svg/*.svg')
	// .pipe(svgmin())
	.pipe(iconfont({
	fontName: fontname,
	PrependUnicode: true,
	formats: ['ttf', 'eot', 'woff', 'woff2'],
	normalize: true,
	fontHeight: 1001,
	fontStyle: 'normal',
	fontWeight: 'normal'
	}))
	.on('glyphs', function(glyphs, options) {
	console.log(glyphs);
	gulp.src(config.src.helpers+'_svgfont.sass')
	.pipe(consolidate('lodash', {
	glyphs: glyphs,
	fontName: fontname,
	fontPath: 'fonts/',
	className: 'icon'
	}))
	.pipe(gulp.dest(config.src.sass+'lib/'));
	gulp.src(config.src.helpers+'icons.html')
	.pipe(consolidate('lodash', {
	glyphs: glyphs,
	fontName: fontname,
	fontPath: 'fonts/',
	className: 'icon',
	htmlBefore: '<i class="icon ',
	htmlAfter: '"></i>',
	htmlBr: ''
	}))
	.pipe(gulp.dest(config.dest.root));
	})
	.pipe(gulp.dest(config.dest.css+'fonts/'))
	.pipe(reload({stream: true}))
	.pipe(notify("Icon font updated!"));
	});

	gulp.task('font:watch', function() {
	gulp.watch(config.src.img+'svg/*', ['font']);
	});
	var gulp = require('gulp'),
	sass = require('gulp-sass'),
	browserSync = require('browser-sync'),
	postcss = require('gulp-postcss'),
	autoprefixer = require('autoprefixer'),
	svgmin = require('gulp-svgmin'),
	svgStore = require('gulp-svgstore'),
	rename = require('gulp-rename'),
	cheerio = require('gulp-cheerio'),
	consolidate = require('gulp-consolidate');

	// sprite
	gulp.task('sprites', function() {
	return gulp
	.src('src/icons/*.svg')
	.pipe(svgmin({
	js2svg: {
	pretty: true
	},
	plugins: [{
	removeDesc: true
	}, {
	cleanupIDs: true
	}, {
	mergePaths: false
	}]
	}))
	.pipe(rename({ prefix: 'icon-' }))
	.pipe(svgStore({ inlineSvg: false }))
	.pipe(cheerio({
	run: extractDataFromIcons,
	parserOptions: { xmlMode: true }
	}))
	.pipe(rename({ basename: 'sprite' }))
	.pipe(gulp.dest('app/img'));
	});

	function extractDataFromIcons($, file) {
	// get data about each icon
	var symbols = $('svg > symbol');
	var data = $('svg > symbol').map(function() {
	var $this = $(this);
	var size = $this.attr('viewBox').split(' ').splice(2);
	return {
	name: $this.attr('id'),
	ratio: Math.ceil((size[0] / size[1]) * 10) / 10
	};
	}).get();

	// remove attributes to make possible applying these styles via css
	symbols.each(function() {
	$(this)
	.children()
	.removeAttr('stroke')
	.removeAttr('stroke-width')
	.not('[fill="currentColor"]')
	.removeAttr('fill')
	});

	// create scss file with icon dimensions
	gulp.src('src/assets/sprite/_svg-sprite.scss')
	.pipe(consolidate('lodash', {
	icons: data
	}))
	.pipe(gulp.dest('src/sass'));

	// create preview
	gulp.src('src/assets/sprite/svg-sprite.html')
	.pipe(consolidate('lodash', {
	icons: data
	}))
	.pipe(gulp.dest('app'));
	}

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>SVG Sprite Preview</title>
	<style type="text/css" media="all">

	h1 {
	text-align: center;
	}

	.icons-list {
	list-style-type: none;
	margin: 0;
	padding: 0;
	font-size: 0;
	text-align: center;
	}

	.icon-box {
	display: inline-block;
	vertical-align: middle;
	min-width: 200px;
	min-height: 200px;
	padding: 20px;
	border-radius: 5px;
	}

	.icon-container {
	min-height: 170px;
	text-align: center;
	font-size: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #CCC;
	border-radius: 5px;
	box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.2);
	}

	input:not([type=range]):not([type=color]) {
	display: inline-block;
	vertical-align: top;
	width: 100%;
	box-sizing: border-box;
	font-size: 12px;
	border-radius: 5px;
	height: 30px;
	padding: 0;
	text-align: center;
	border: 1px solid #CCC;
	box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.2);
	-webkit-appearance: none;
	}

	.configure {
	display: flex;
	flex-direction: column;
	max-width: 300px;
	margin: auto;
	}

	.configure label:first-child input {
	display: block;
	width: 100%;
	}

	.configure label:last-child {
	margin-top: 10px;
	display: flex;
	align-items: center;
	}

	.icon-class-name {
	width: 70%;
	}

	.icon-unicode {
	width: 30%;
	}

	<% _.forEach(icons, function(icon) { %>.<%= icon.name %> {
	width: <%= icon.ratio %>em;
	height: 1em;
	}
	<% }); %>
	</style>
	</head>
	<body>
	<h1>Icons: <span id="count"></span></h1>

	<div class="configure">
	<label>
	<span>Size: <b><output for="size" id="size-value">100</output></b>px</span>
	<input type="range" id="size" value="100" min="6" max="1000">
	</label>

	<label>
	<span>Color: </span>
	<input type="color" id="color">
	</label>
	</div>

	<ul class="icons-list">
	<% _.forEach(icons, function(icon) { %>
	<li class="icon-box">
	<input class="icon-class-name autoselect" type="text" value=".<%= icon.name %>" readonly>
	<div class="icon-container">
	<svg class="icon <%= icon.name %>">
	<use xlink:href="/img/sprite.svg#<%= icon.name %>"></use>
	</svg>
	</div>
	</li>
	<% }) %>
	</ul>

	<script>
	var change = document.getElementById('size');
	var color = document.getElementById('color');
	var changeVal = document.getElementById('size-value');
	var count = document.getElementById('count');
	var autoselect = document.getElementsByClassName('autoselect');
	var icons = document.getElementsByClassName('icon');

	Array.prototype.forEach.call(autoselect, function(el) {
	el.onclick = function() {
	this.focus();
	this.select();
	};
	});

	change.oninput = function() {
	var val = this.value;
	changeVal.value = val;
	Array.prototype.forEach.call(icons, function(el) {
	el.style.fontSize = val + 'px';
	});
	}

	color.onchange = function() {
	var val = this.value;
	Array.prototype.forEach.call(icons, function(el) {
	el.style.fill = val;
	});
	}

	count.innerHTML = icons.length;
	</script>
	</body>
	</html>