Write SVG is a PostCSS plugin to write SVGs directly in CSS.
/* before */
.arrow {
@svg {
polygon {
fill: green;
points: 50,100 0,0 0,100;
}
}
}
/* after */
.arrow {
background-image: url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpolygon%20fill%3D%22green%22%20points%3D%2250%2C100%200%2C0%200%2C100%22%2F%3E%3C%2Fsvg%3E)
}
Follow these steps to use Write SVG.
Add Write SVG to your build tool:
npm install postcss-write-svg --save-dev
require('postcss-write-svg')({ /* options */ }).process(YOUR_CSS);
Add PostCSS to your build tool:
npm install postcss --save-dev
Load Write SVG as a PostCSS plugin:
postcss([
require('postcss-write-svg')({ /* options */ })
]);
Add Gulp PostCSS to your build tool:
npm install gulp-postcss --save-dev
Enable Write SVG within your Gulpfile:
var postcss = require('gulp-postcss');
gulp.task('css', function () {
return gulp.src('./css/src/*.css').pipe(
postcss([
require('postcss-write-svg')({ /* options */ })
])
).pipe(
gulp.dest('./css')
);
});
Add Grunt PostCSS to your build tool:
npm install grunt-postcss --save-dev
Enable Write SVG within your Gruntfile:
grunt.loadNpmTasks('grunt-postcss');
grunt.initConfig({
postcss: {
options: {
processors: [
require('postcss-write-svg')({ /* options */ })
]
},
dist: {
src: 'css/*.css'
}
}
});