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() {
  gulp.src( './icons/*.svg' )
    .pipe( icons({
      module: 'myApp',
    }) )
    .pipe( gulp.dest( './' ) );
});

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( 'myApp' )
  .component( 'svg-icon', {
    template: '{{ $ctrl.markup }}',
    controller: mctIconController,
    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>

Under-The-Hood

A directory like this:

icons/
├── clock.svg
└── shopper.svg

With this gulp file:

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

gulp.task( 'icons', function() {
  gulp.src( './icons/*.svg' )
    .pipe( icons({
      module: 'myApp',
      constant: 'ICNS',
      optimize: true,
      file: 'icns.js',
    }) )
    .pipe( gulp.dest( './' ) );
});

Will create a file called icns.js that looks like this:

angular
  .module( 'myApp' )
  .constant( 'ICNS', {
    clock: '<svg version="1.0" encoding=" etc etc etc </path></svg>',
    shopper: '<svg version="1.0" encoding=" etc etc etc </path></svg>',
  });