Skip to content

Instantly share code, notes, and snippets.

@sekoyo
Last active May 31, 2019 23:38
Show Gist options
  • Save sekoyo/ab326926566363ea4252f9c59124e7dd to your computer and use it in GitHub Desktop.
Save sekoyo/ab326926566363ea4252f9c59124e7dd to your computer and use it in GitHub Desktop.
node-sass external svg to inline
'use strict';
const path = require('path');
const fs = require('fs');
const types = require('node-sass').types;
function svgContentWrapper(svgContent) {
return `url('data:image/svg+xml;charset=UTF-8,${svgContent.replace(/\r?\n|\r/g, '')}')`;
}
function svgPathToInline(svgPath, done) {
const fullPath = path.resolve(svgPath.getValue());
fs.readFile(fullPath, 'utf-8', (err, data) => {
if (err) {
console.error(err);
return done(types.Null());
}
done(new types.String(svgContentWrapper(data)));
});
}
module.exports = {
'svg($svgPath)': svgPathToInline
}
@sekoyo
Copy link
Author

sekoyo commented Apr 29, 2016

Add --functions='./node-sass-functions.js' to your node-sass CLI

@sekoyo
Copy link
Author

sekoyo commented Apr 29, 2016

Example of use in a function:

@function icon($svgName) {
    @return svg('node_modules/octicons/svg/' + $svgName + '.svg');
}
.something {
  background-image: icon('mail');
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment