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

plus.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.