gulp-css-svg v1.3.1
gulp-css-svg
(https://badges.gitter.im/Join Chat.svg)
This gulp task converts all svg urls found within a stylesheet (those within a url( ... ) declaration) into uri-encoded data URI strings WITHOUT doing a base64 encode. This helps see what is going on and saves space.
Inspired by grunt-image-embed and written following gulp's guidelines.
Features
- Supports local and remote resources.
- Supports buffer (and stream WIP).
- [>] Ability to define a relative base directory to gulpfile.js. Default is the current directory.
- [>] Ability to specify a weight limit. Default is 32kB which is IE8's limit.
- [>] Ignore a resource by specifying a directive comment in CSS.
- Existing data URIs will be ignored.
- Existing SVG masks will be ignored.
Install
Install this plugin with the command:
npm install --save-dev gulp-css-svg
Usage
var cssSvg = require('gulp-css-svg');
//Without options
gulp.task('default', function () {
return gulp.src('src/css/input.css')
.pipe(cssSvg())
.pipe(gulp.dest('dist'));
});
//With options
gulp.task('default', function () {
return gulp.src('src/css/input.css')
.pipe(cssSvg({
baseDir: "../../images",
maxWeightResource: 100
}))
.pipe(gulp.dest('dist'));
});
Options
options.baseDir
Type: String
Default value:
Note: If you have absolute image paths in your stylesheet, the path specified in this option will be used as the base directory. By default plugin used the current directory of gulpfile.js to find local resources.
options.maxWeightResource
Type: Number
Default value: 32768
Ignore a specific resource
You can ignore a resource with a comment /*svg:skip*/
in CSS file after url definition.
.ignored{
background: url(image.png); /*svg:skip*/
}
.encoded{
background: url(image.jpg);
}
License
Copyright (c) 2017 Stephanie Miller under the MIT License.