Write SVG: a PostCSS plugin

Heres a cool PostCSS plugin that lets us write SVG directly in CSS with the rest of our styles:

.arrow {
@svg {
polygon {
fill: green;
points: 50,100 0,0 0,100;
}
}
}

These values will then be converted into a data URI, like so:

.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)
}

Like Sara Soueidan mentions, I'd love to see this in Sass.

Direct Link to Article — Permalink…

Write SVG: a PostCSS plugin is a post from CSS-Tricks