1.1.15 • Published 10 years ago

gulp-svg-to-css v1.1.15

Weekly downloads
220
License
MIT
Repository
github
Last release
10 years ago

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