Compass inline svg with string replacement (e.g., for fills)

config.rb

module Sass::Script::Functions

  def inline_svg_image(path, repl = nil)
    real_path = File.join(Compass.configuration.images_path, path.value)
    svg = data(real_path)
    if repl && repl.respond_to?('to_h')
      repl = repl.to_h
      svg = svg.to_s

      repl.each_pair do |k, v|

        if svg.include? k.value
          svg.gsub!(k.value, v.value)
        end
      end
    end
    encoded_svg = CGI::escape(svg).gsub('+', '%20')
    data_url = "url('data:image/svg+xml;charset=utf-8," + encoded_svg + "')"
    Sass::Script::String.new(data_url)
  end

private

  def data(real_path)
    if File.readable?(real_path)
      File.open(real_path, "rb") {|io| io.read}
    else
      raise Compass::Error, "File not found or cannot be read: #{real_path}"
    end
  end

end

Usage example

// Icon mixin. Assumes square icon.
@mixin icon($name, $factor: 1, $fill: 'black', $library: 'icomoon', $grid: 16px) {
  display: block;
  height: $factor * $grid;
  width: $factor * $grid;
  content: '';
  background-image: inline-svg-image('icomoon/SVG/' + $name + '.svg', ( '#000000': inspect($fill)));
  background-size: cover;
}