Write SVG
Write SVG lets you write SVGs directly in CSS.
/* before */ @} /* after */
@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 } */ @} /* after */
Usage
Add Write SVG to your build tool:
npm install jonathantneal/postcss-write-svg --save-dev
Node
;
PostCSS
Add PostCSS to your build tool:
npm install postcss --save-dev
Load Write SVG as a PostCSS plugin:
;
Gulp
Add Gulp PostCSS to your build tool:
npm install gulp-postcss --save-dev
Enable Write SVG within your Gulpfile:
var postcss = ; gulp;
Grunt
Add Grunt PostCSS to your build tool:
npm install grunt-postcss --save-dev
Enable Write SVG within your Gruntfile:
grunt; grunt;