SVG Sprite Set Up

_mixins.scss

// Strips units from any number
@function strip-units($number) {
	@return $number / ($number * 0 + 1);
}

// Converts px to ems
@function em($px, $base: 16px) {
	@return (strip-units($px) / strip-units($base)) * 1em;
}

// Gets an attribute from the sass mapp
@function sprite-attr($icon, $attr) {
	$icon: map-get($icons, $icon);
	@return map-get($icon, $attr);
}


// Sets background image and size with IE fallback
%sprite {
	display: inline-block;
	background-size: em(map-get($sprite, width)) em(map-get($sprite, height));
	background-image: url(map-get($sprite, svgPath));
	.ie8{
	  background-image: url(map-get($sprite, pngPath));
	}
}


@mixin sprite($icon) {
	// Shares the backgrounds
	@extend %sprite;

	// Gets the dimensions and background position
	$iconWidth: sprite-attr($icon, width);
	$iconHeight: sprite-attr($icon, height);
	$iconBackgroundX: sprite-attr($icon, backgroundX);
	$iconBackgroundY: sprite-attr($icon, backgroundY);

	// Converts to ems to set
	width: em($iconWidth+1);
	height: em($iconHeight+1);
	background-position: em($iconBackgroundX - 5) em($iconBackgroundY - 5);

	// If IE var is present, add px fallback
		.ie8 & {
			width: $iconWidth;
			height: $iconHeight;
			background-position: ($iconBackgroundX - 5) ($iconBackgroundY - 5);
		}

}

gulpfile.js

var basePaths = {
	src: 'assets/',
	dest: 'assets/'
};

var paths = {
	images: {
		// src: basePaths.src + 'img/',
		dest: basePaths.dest + 'img/'
	},
	styles: {
		src: basePaths.src + 'sass/',
		dest: basePaths.dest + 'css/'
	},
	sprite: {
		src: basePaths.src + 'sprite/*',
		svg: 'img/sprite.svg'
	},
	templates: {
		src: basePaths.dest + '/tpl'
	}
};


gulp.task('svgSprite', function () {

	return gulp.src(paths.sprite.src)
		.pipe(plugins.svgo())
		.pipe(plugins.svgSprites({
			cssFile: 'sass/partials/_sprite.scss',
			preview: false,
			layout: 'diagonal',
			padding: 5,
			svg: {
				sprite: paths.sprite.svg
			},
			templates: {
				css: require("fs").readFileSync(paths.templates.src + '/sprite-template.css', "utf-8")
			}
		}))
		.pipe(gulp.dest(basePaths.dest));

});

sprite-template.css

{#common}
$icons: (
    sprite: (width: {swidth}px, height: {sheight}px, pngPath: '{pngPath}', svgPath: '{svgPath}'),{/common}
{#svg}
    {name}: (width: {width}px, height: {height}px, backgroundX: {positionX}px, backgroundY: {positionY}px),{/svg}
{#common});
{/common}