PostCSS plug-in which to insert inline SVG to CSS and allows you to manage it colors. Examples here
Features:
- Easy insert inline SVG to CSS
- Manage colors of your SVG image without editinig it
- Symbols sprites support
- Compression with svgo
- Support Evil Icons from box
npm install postcss-svg --save-dev
PostCSS:
//...
var postcss = require('postcss');
var postcssSVG = require('postcss-svg');
var processors = [
//... ,
postcssSVG({
paths: ['pathToSVGDir1', 'pathToSVGDir2'],
defaults: "[fill]: #000000",
//more options...
});
];
postcss(processors)
.process(css, { from: './src/app.css', to: './dist/app.css' })
.then(function (result) {
fs.writeFileSync('./dist/app.css', result.css);
});
Gulp:
var gulp = require('gulp');
var postcss = require('gulp-postcss');
gulp.task('styles', function() {
var postcssProcessors;
postcssSVG = require.reload('postcss-svg');
postcssProcessors = [
postcssSVG({ defaults: '[fill]: green' })
];
gulp.src('app/style.css')
.pipe(postcss(postcssProcessors))
.pipe(gulp.dest('.tmp'));
});
Using this input.css
:
body {
background-image: svg("ei#sc-github", "[fill]: black");
}
you will get:
body {
background-image: url("data:image/svg+xml,%3Csvg%20id%3D%22ei-sc-github-icon%22%20viewBox%3D%220%200%2050%2050%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20style%3D%22fill%3Ablack%3B%22%20height%3D%22100%25%22%20width%3D%22100%25%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M25%2010c-8.3%200-15%206.7-15%2015%200%206.6%204.3%2012.2%2010.3%2014.2.8.1%201-.3%201-.7v-2.6c-4.2.9-5.1-2-5.1-2-.7-1.7-1.7-2.2-1.7-2.2-1.4-.9.1-.9.1-.9%201.5.1%202.3%201.5%202.3%201.5%201.3%202.3%203.5%201.6%204.4%201.2.1-1%20.5-1.6%201-2-3.3-.4-6.8-1.7-6.8-7.4%200-1.6.6-3%201.5-4-.2-.4-.7-1.9.1-4%200%200%201.3-.4%204.1%201.5%201.2-.3%202.5-.5%203.8-.5%201.3%200%202.6.2%203.8.5%202.9-1.9%204.1-1.5%204.1-1.5.8%202.1.3%203.6.1%204%201%201%201.5%202.4%201.5%204%200%205.8-3.5%207-6.8%207.4.5.5%201%201.4%201%202.8v4.1c0%20.4.3.9%201%20.7%206-2%2010.2-7.6%2010.2-14.2C40%2016.7%2033.3%2010%2025%2010z%22%2F%3E%3C%2Fsvg%3E");
}
Type: Array
Default: ['svg']
Example: ['pathToSVGDir1', 'pathToSVGDir2']
Required: false
You can define relative path to folders with SVG files.
Type: String
Default: 'svg' Example: 'url' Required: false
You can set func option to 'url' to support fallback to url("*.svg") links.
Type: Boolean
, Object
Default: false
Example: true
Required: false
You can set custom config for svgo module. Recommend to set true only for production build.
Type: String
Default: ''
Example: '[fill]: #00F800; .glass[fill]: rgba(0, 0, 255, 0.1);'
Required: false
You can set default rules for all included SVG
Type: Boolean
, Object
Default: true
Example: { "defaults": "[fill]: red" }
Required: false
You can set false to disable initializing Evil Icons. Or you can set different defaults only for Evil Icons.
Type: Boolean
Default: false
Required: false
You can set false to disable initializing Evil Icons. Or you can set different defaults only for Evil Icons.
Type: Boolean
Default: true
Required: false
Do not throw errors
You can replace only existing values of fill
and stroke
attributes.
To replace colors you can use simple selectors.
You can use several selectors for one SVG.
In the bottom you can see this selectors in ascending order.
For better understanding of selectors check examples.
All fill
and stroke
attributes
All fill
or stroke
attributes
fill
or stroke
tag attributes with name tagName
fill
or stroke
tag attributes with class className
All colors in SVG are grouped in color groups. N - group index, starts from 0 (from the top of SVG document)
fill
or stroke
tag attributes with id identifier
All colors in SVG have index. N - index, starts from 0 (from the top of SVG document)
Pull requests are welcome. To run development envirement
git clone [email protected]:Pavliko/postcss-svg.git
cd postcss-svg
npm install
gulp watch