1.1.15 • Published 10 years ago
gulp-svg-to-css v1.1.15
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
- Download chrome extension https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei
- Open your site in chrome
- Run gulp default task
- Enable Livereload extension
- Try change svg files
- ???
- PROFIT
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']);
1.1.15
10 years ago
1.1.14
10 years ago
1.1.13
10 years ago
1.1.12
10 years ago
1.1.11
10 years ago
1.1.0
10 years ago
1.1.10
10 years ago
1.0.10
10 years ago
1.0.9
10 years ago
1.0.8
10 years ago
1.0.7
10 years ago
1.0.6
10 years ago
1.0.5
10 years ago
1.0.4
10 years ago
1.0.3
10 years ago
1.0.2
10 years ago
1.0.1
10 years ago
1.0.0
10 years ago