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.

@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;charset=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