node-sass inline svgs via `svg()` function

README.md

Make it easy to include SVG strings inline via node-sass.

Escapes SVG (via encodeURIComponent + node-sass custom function).

Wraps <svg/> with appropriate url(data...) which I can never remember.

Call:

node-sass --source-map=true --functions=./node-sass-functions.js in.scss out.css

Usage:

@import "functions.scss";
div {
  background-image: svg('<svg></svg>');
}

Be sure to @import "functions.scss";!

_functions.scss

// use svg('<svg />') anywhere!
@function svg($svg) {
	@return url('data:image/svg+xml,' + uri-encode(unquote($svg)));
}

node-sass-functions.js

var types = require('node-sass').types

module.exports = {
	'uri-encode($val)': function uriEncode(val) {
		return (new types.String(encodeURIComponent(val.getValue())))
	},
}

Using sass with eyeglass one can also inline a SVG file directly:
eyeglass-file-text for plain text + binary files (as base64 string)
eyeglass-inline-svg (uses eyeglass-file-text above + eyeglass-inline-urlescape)
for plain text in data uris, notably SVG files.

More about eyeglass: https://github.com/sass-eyeglass/eyeglass

With best regards