gulp-svg-inline-css
Colorize, styling SVG icons and converting into base64-encoded data URI strings
Install
npm install gulp-svg-inline-css
Basic usage
var gulp = concat = svg = ; gulp
Styling
Just add key: value
pairs like this
......
All available style options you can find at https://www.w3.org/TR/SVG/painting.html
*camelCase
keys will be transformed into dash-splitted
** inline style will be added for all elements in this list path,rect,circle,ellipse,line,polyline,polygon,g,text
Class names
By default defined this mask .icon.%s
where %s
is file name without extension.
You can define your own rules for building class name's, just add className
key into build options:
......
or use callback
Optimize SVG
For optimizing and compress use gulp-svgmin
https://www.npmjs.com/package/gulp-svgmin
var gulp = concat = svgmin = svg = ; gulp
Rasterize SVG
If you add param raw: true
, plugin just add styles without base64 encoding and css transforms.
Options heigth
and width
avail for image scaling.
Here simple example how you can rasterize svg icons and save as png
files
var gulp = svgmin = raster = rename = svg = ; gulp;