https://github.com/undercloud/gulp-svg-inline-css
Colorize, styling SVG icons and converting into base64-encoded data URI strings
https://github.com/undercloud/gulp-svg-inline-css
Last synced: 11 months ago
JSON representation
Colorize, styling SVG icons and converting into base64-encoded data URI strings
- Host: GitHub
- URL: https://github.com/undercloud/gulp-svg-inline-css
- Owner: undercloud
- License: mit
- Created: 2016-02-13T18:27:42.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2019-03-10T08:30:52.000Z (almost 7 years ago)
- Last Synced: 2025-03-03T22:21:54.249Z (12 months ago)
- Language: JavaScript
- Homepage:
- Size: 16.6 KB
- Stars: 0
- Watchers: 2
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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
```js
var gulp = require('gulp'),
concat = require('gulp-concat'),
svg = require('gulp-svg-inline-css');
gulp.task('style-svg', function() {
gulp.src('/path/to/*.svg')
.pipe(svg({
style: {
fill: '#E08283'
}
}))
.pipe(concat('sprites.css'))
.pipe(gulp.dest('styles/'));
})
```
## Styling
Just add ```key: value``` pairs like this
```js
...
.pipe(svg({
style: {
fill: '#E08283',
stroke: '#674172',
strokeWidth: 1
}
}))
...
```
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:
```js
...
.pipe(svg({
//bem like style
className: '.icon.icon--%s:hover',
style: {...}
}))
...
```
or use callback
```js
.pipe(svg({
className: function(fileName) {
return '.' + fileName.replace(/[^A-Za-z0-9_-]/g, '-').toLowerCase();
},
style: {...}
}))
```
## Optimize SVG
For optimizing and compress use ```gulp-svgmin``` https://www.npmjs.com/package/gulp-svgmin
```js
var gulp = require('gulp'),
concat = require('gulp-concat'),
svgmin = require('gulp-svgmin'),
svg = require('gulp-svg-inline-css');
gulp.task('style-svg', function() {
gulp.src('/path/to/*.svg')
.pipe(svgmin())
.pipe(svg({
style: {
fill: '#E08283'
}
}))
.pipe(concat('sprites.css'))
.pipe(gulp.dest('styles/'));
})
```
## 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
```js
var gulp = require('gulp'),
svgmin = require('gulp-svgmin'),
raster = require('gulp-raster'),
rename = require('gulp-rename'),
svg = require('gulp-svg-inline-css');
gulp.task('inline-svg', function() {
gulp.src('*.svg')
.pipe(svgmin())
.pipe(svg({
raw: true,
width: 48,
height: 48,
style: {
fill: '#E08283'
}
}))
.pipe(raster())
.pipe(rename({
extname: '.png'
}))
.pipe(gulp.dest('processed/'));
});
```