node-sass external svg to inline

node-sass-functions.js

'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
}

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

Example of use in a function:

@function icon($svgName) {
    @return svg('node_modules/octicons/svg/' + $svgName + '.svg');
}

.something {
  background-image: icon('mail');
}