Write SVG 
Write SVG lets you write SVGs directly in CSS.
/* before */
@svg square {
@rect {
fill: var(--color, black);
width: var(--size);
height: var(--size);
}
}
.example {
background: svg(square param(--color green) param(--size 100%)) center / cover;
}
/* after */
.example {
background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect fill='green' width='100%25' height='100%25'/%3E%3C/svg%3E") center / cover;
}@svg at-rules generate SVG elements available to CSS. Within an @svg, descendant at-rules (like @rect) are interpreted as elements, while declarations (like width) are interpreted as attributes.
The svg() function renders an @svg as a data url(). var() functions within an @svg honor the variables passed in through param() functions.
Options
utf8
Type: Boolean
Default: true
Allows you to define whether UTF-8 or base64 encoding will be used.
/* before { utf8: false } */
@svg square {
@rect {
fill: black;
width: 100%;
height: 100%;
}
}
.example {
background: svg(square);
}
/* after */
.example {
background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IGZpbGw9ImJsYWNrIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIi8+PC9zdmc+");
}Usage
Add Write SVG to your build tool:
npm install jonathantneal/postcss-write-svg --save-devNode
require('postcss-write-svg').process(YOUR_CSS, { /* options */ });PostCSS
Add PostCSS to your build tool:
npm install postcss --save-devLoad Write SVG as a PostCSS plugin:
postcss([
require('postcss-write-svg')({ /* options */ })
]).process(YOUR_CSS, /* options */);Gulp
Add Gulp PostCSS to your build tool:
npm install gulp-postcss --save-devEnable Write SVG within your Gulpfile:
var postcss = require('gulp-postcss');
gulp.task('css', function () {
return gulp.src('./src/*.css').pipe(
postcss([
require('postcss-write-svg')({ /* options */ })
])
).pipe(
gulp.dest('.')
);
});Grunt
Add Grunt PostCSS to your build tool:
npm install grunt-postcss --save-devEnable Write SVG within your Gruntfile:
grunt.loadNpmTasks('grunt-postcss');
grunt.initConfig({
postcss: {
options: {
use: [
require('postcss-write-svg')({ /* options */ })
]
},
dist: {
src: '*.css'
}
}
});