gulp-angular-svg-d

Gulp plugin that generates an angular directive for every svg file thus you can include it adding 'class="my-svg-file-name"' to any element, or itself as an image-like element ''. You simply should include the .js file generated (svg-d.js by default). You can also attach an svg image as background, just add class 'svg-background'. Styles such as background-position, size,... can be set as usual on style-sheets or style attribute.

Install | Example

Install

Install with npm

npm install gulp-angular-svg-d --save-dev

Example

gulpfile.js

Concatenate the contents of all .svg files and save to public/svg-d.js (by default).

var svgD = require('gulp-angular-svg-d');

gulp.task('svg-d', function() {
    return gulp.src([path.src+'**/*.svg'])
      .pipe(svgD('svg-d.js', {module:'app'}))
      .pipe(gulp.dest(path.public));
  })

When applied on 'my-first-svg.svg' and 'my-second-svg.svg' we'll obtain:

Result (public/svg-d.js)

angular.module("app")
  .directive("myFirstSvg",function(){
    return {
      restrict:"EC", // We can use as a class or an element tag
      template:"[Here the 'my-first-svg.svg' content]"
      }
    })
    .directive("mySecondSvg",function(){
      return {
        restrict:"EC",
        template:"[Here the 'my-second-svg.svg' content]"
      }
    });

Update: Result has been changed for supporting background svg's, but logic hasn't changed ;) Note: While this plugin adds svg files as templates you don't need to copy them.