SASS SVG URI

This is just a simple module with Jakob Eriksen's function for easy use in projects. Uses Hugo Giraudel's str-replace function to replace invalid characters in the SVG as a data uri.

Usage

Just import the file and use the function, no dependencies, SASS Version.

@import "sass-svg-uri/svg-uri"

.icon
    background-image: svg-uri('<svg xmlns="http://www.w3.org/2000/svg"> ... </svg>')

Would output:

.icon {
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E% ... %3C/svg%3E");
}

To know more:

• CSS-Tricks: Probably Don’t Base64 SVG
• Codepen: Optimizing SVGs in data URIs