gulp-svg-sprite

_mixins.scss

$ieSprite: '.lt-ie9' !default;

$baseFontSize: 16px !default; // For em calc

// 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);
}

// For use with the gulp sprite plugin
@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); //N OT SURE YOU NEED THE -5 ANY MORE

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

}

// Gets just the background position (for use with hovers and such)
@mixin sprite-bg($icon) {
	$iconBackgroundX: sprite-attr($icon, backgroundX);
	$iconBackgroundY: sprite-attr($icon, backgroundY);
	background-position: em($iconBackgroundX - 5) em($iconBackgroundY - 5);
	@if $ieSprite {
		#{$ieSprite} & {
			background-position: ($iconBackgroundX - 5) ($iconBackgroundY - 5);
		}
	}
}

_sprite.scss

// Generated file

$icons: (
    sprite: (width: 2871px, height: 2736px, pngPath: '../img/sprite.png', svgPath: '../img/sprite.svg'),
    arrowLgBlack: (width: 24px, height: 24px, backgroundX: 0px, backgroundY: 0px),
    arrowLgGreen: (width: 24px, height: 24px, backgroundX: -34px, backgroundY: -34px),
    arrowLgRed: (width: 24px, height: 24px, backgroundX: -68px, backgroundY: -68px),
    arrowLgWhite: (width: 24px, height: 24px, backgroundX: -102px, backgroundY: -102px),
    arrowMdBlack: (width: 18px, height: 18px, backgroundX: -136px, backgroundY: -136px),
    arrowMdGreen: (width: 18px, height: 18px, backgroundX: -164px, backgroundY: -164px),
    arrowMdRed: (width: 18px, height: 18px, backgroundX: -192px, backgroundY: -192px),
    arrowMdWhite: (width: 18px, height: 18px, backgroundX: -220px, backgroundY: -220px),
    arrowSmBlack: (width: 11px, height: 11px, backgroundX: -248px, backgroundY: -248px)
);

gulpfile.js

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}