An automatic SVG converter for your CSS files
An automatic SVG converter for your CSS files, built on top of the PostCSS ecosystem.
Right now it is only possible to use this as a PostCSS plugin:
var postcss = require('postcss')
var svgFallback = require('postcss-svg-fallback')
var input = read(/* read some css */);
postcss()
.use(svgFallback({
// base path for the images found in the css
// this is most likely the path to the css file you're processing
// not setting this option might lead to unexpected behavior
basePath: '',
// destination for the generated SVGs
// this is most likely the path to where the generated css file is outputted
// not setting this option might lead to unexpected behavior
dest: '',
// selector that gets prefixed to selector
fallbackSelector: '.no-svg',
// when `true` only the css is changed (no new files created)
disableConvert: false,
})
.process(input)
.then(function(processor) {
var output = processor.toString();
});
Note: we must use the async version of postcss
Converts this:
.icon {
background: url(images/sun-is-shining.svg) no-repeat;
background-size: 20px 20px; /* background-size is mandatory */
}
.icon-inline {
background: url(data:image/svg+xml; .. svg data ..) no-repeat;
background-size: 20px 20px; /* background-size is mandatory */
}
to this:
.icon {
/* original declarations are untouched */
background: url(images/sun-is-shining.svg) no-repeat;
background-size: 20px 20px;
}
/* same selector, but with a prefix */
.no-svg .icon {
/* a png image is generated and placed in the `dest` folder,
* with default settings, that's right next to the original SVG
*/
background-image: url(images/sun-is-shining-20x20.png);
}
.icon-inline {
background: url(data:image/svg+xml; .. svg data ..) no-repeat;
background-size: 20px 20px; /* background-size is mandatory */
}
.no-svg .icon-inline {
/* filename contains the hash of the svg data */
background-image: url(3547c094eaf671040650cdcab2ca70fd-20x20.png);
}
Converting is done with PhantomJS and is only done for images that actually need conversion (background-size
& mtime
).