gst

gulp-svg-to-css

Packs svg files in css sprite inline

Showing:

Popularity

Downloads/wk

15

Maintenance

No Maintenance Data Available

Package

Dependencies

4

Size (min+gzip)

227.2KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

gulp-svg-to-css

Plugin for gulp: Packs svg files in css sprite inline

Install:

npm install gulp-svg-to-css --save-dev

Usage:

var svgToSss = require('gulp-svg-to-css');

gulp.src('**/*.svg')
.pipe(svgToSss('svg.css'))
.pipe(gulp.dest('build/'));

generated css:

.svg-filename,
.svg-filename-before:before,
.svg-filename-after:after{
    background-image:url('data:image/svg+xml,data...')
}

.svg-filename2,
.svg-filename2-before:before,
.svg-filename2-after:after{
    background-image:url('data:image/svg+xml,data...')
}

in html

<div class='svg-filename'>
as background-image for element
</div>

<div class='svg-filename-before'>
as background-image for :before pseudo-element
</div>

Options:

svgToSss({
    name:'svg.css', // default 'svg.css'
    prefix: 'ololo-', //  default 'svg-'
    postfix: '-trololo', //  default ''
})

result css:

.ololo-filename-trololo,
.ololo-filename-trololo-before:before,
.ololo-filename-trololo-after:after{
    background-image:url('data:image/svg+xml,data...')
}

Custom template:

This plugin use mustache template engine

default template:

.{{prefix}}{{filename}}{{postfix}},
.{{prefix}}{{filename}}{{postfix}}-before:before,
.{{prefix}}{{filename}}{{postfix}}-after:after{background-image:url('{{{dataurl}}}')}

custom template:

svgToSss({
    template: "{{filename}} {{dataurl}} {{data}} {{prefix}} {{postfix}}"
})

Use with css preprocessors:

svgToSss({
    name: 'vars.styl',
    template: "{{filename}} = '{{dataurl}}'"
})
.pipe(stylus())

result vars.styl:

filename1 = 'data:image/svg+xml,data...'
filename2 = 'data:image/svg+xml,data...'
filename3 = 'data:image/svg+xml,data...'

BONUS livereload svg after change

var svgToSss = require('gulp-svg-to-css');
var livereload = require('gulp-livereload');
var watch = require('gulp-watch');

gulp.task('svg', function(){
    return gulp.src('**/*.svg')
    .pipe(svgToSss('svg.css'))
    .pipe(gulp.dest('build/'))
    .pipe(livereload());
});

gulp.task('watch', function(){
    livereload.listen();
    watch('**/*.svg', function(){ gulp.start('svg') });
});

gulp.task('default', ['svg', 'watch']);

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100