turn svg files into data-uri'd sass-mixins with color-variations

plus.svg

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 60 60" style="enable-background:new 0 0 60 60;" xml:space="preserve" fill="#000000">
<polygon points="60,26.7 33,26.7 33,-0.3 27,-0.3 27,26.7 0,26.7 0,32.7 27,32.7 27,59.7 33,59.7 33,32.7 60,32.7 "/>
</svg>

svg-data-uri-mixin.php

<?php

unset($argv[0]);

$colors = [
  'black' => '#000000',
  'white' => '#ffffff',
  'red'   => '#e43038'
];

foreach ($argv as $path) {
  $list = explode('/', $path);
  $name = strstr(array_pop($list), '.svg', true);
  $svg  = file_get_contents($path);

  foreach ($colors as $color => $colorValue) {
    $coloredSvg = str_replace('#000000', $colorValue, $svg);
    
    echo "@mixin svg-$name-$color {" . PHP_EOL;
    echo '  background-image: url(data:image/svg+xml;base64,' 
         . base64_encode($coloredSvg)
         . ');' . PHP_EOL;
    echo '}' . PHP_EOL;
    echo PHP_EOL;
  }
}

usage.md

$ php make-mixin.php plus.svg
@mixin svg-plus-black {
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB2aWV3Qm94PSIwIDAgNjAgNjAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDYwIDYwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgZmlsbD0iIzAwMDAwMCI+Cjxwb2x5Z29uIHBvaW50cz0iNjAsMjYuNyAzMywyNi43IDMzLC0wLjMgMjcsLTAuMyAyNywyNi43IDAsMjYuNyAwLDMyLjcgMjcsMzIuNyAyNyw1OS43IDMzLDU5LjcgMzMsMzIuNyA2MCwzMi43ICIvPgo8L3N2Zz4K);
}

@mixin svg-plus-white {
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB2aWV3Qm94PSIwIDAgNjAgNjAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDYwIDYwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgZmlsbD0iI2ZmZmZmZiI+Cjxwb2x5Z29uIHBvaW50cz0iNjAsMjYuNyAzMywyNi43IDMzLC0wLjMgMjcsLTAuMyAyNywyNi43IDAsMjYuNyAwLDMyLjcgMjcsMzIuNyAyNyw1OS43IDMzLDU5LjcgMzMsMzIuNyA2MCwzMi43ICIvPgo8L3N2Zz4K);
}

@mixin svg-plus-red {
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB2aWV3Qm94PSIwIDAgNjAgNjAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDYwIDYwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgZmlsbD0iI2U0MzAzOCI+Cjxwb2x5Z29uIHBvaW50cz0iNjAsMjYuNyAzMywyNi43IDMzLC0wLjMgMjcsLTAuMyAyNywyNi43IDAsMjYuNyAwLDMyLjcgMjcsMzIuNyAyNyw1OS43IDMzLDU5LjcgMzMsMzIuNyA2MCwzMi43ICIvPgo8L3N2Zz4K);
}

Note color replacment assumes that the SVG has fill="#000000" defined, as the script does a very simple find-replace.