Nuclear Pizza Machine

    gulp-svg-to-css

    1.1.15 • Public • Published

    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']);

    Install

    npm i gulp-svg-to-css

    DownloadsWeekly Downloads

    13

    Version

    1.1.15

    License

    MIT

    Last publish

    Collaborators

    • maxmaxmaximus