melon-gulp-angular-inline-svg

You:

• have SVG files you’d like to use
• are using Angular 1.x
• don’t want to use sprites

We:

• provide a Gulp task that concatenates your icons into an Angular constant

You:

• inject the constant into your components (or create a component wrapper)
• drop the SVG into your markup using ng-bind-html or something similar
• use CSS to size and style your SVG files in markup
• celebrate

Installation

npm install gulp-angular-inline-svg

Gulp Example

var gulp = require( 'gulp' );
var icons = require( 'gulp-angular-inline-svg' );

gulp.task('icons', function(cb) {
	pump([
		gulp.src('./app/assets/icons/*.svg'),
		icons({
			module: 'app',
			constant: 'ICONS',
			optimize: true,
			file: 'icon.constant.js'
		}),
		gulp.dest('./app/components/common/config')
	], cb);
});

Options

The task icons takes in an options object like so .pipe( icons( options ) ). The available options are:

• module the name of the Angular module that goes into the result file
• constant the name of the Angular constant that goes into the result file
• file the result filename
• optimize whether to run the files through SVGO to optimize the markup

Usage Recommendation

The best way to use this is through a component like this:

angular
	.module('app')
	.component('icon', {
		controller: iconController,
		template: '<span ng-bind-html="$ctrl.markup"></span>',
		bindings: {
			name: '@'
		}
	});

function iconController(ICONS, $sce) {
	this.markup = $sce.trustAsHtml(ICONS[this.name]);
}

which you can use in a page like so:

<icon name="clock"></icon>