gulp-angular-svg-d v0.3.0
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.