Skip to content

Instantly share code, notes, and snippets.

@mfdj
Last active October 31, 2021 17:33
Show Gist options
  • Save mfdj/356bef3f82dbb8507fe4bd12365c646e to your computer and use it in GitHub Desktop.
Save mfdj/356bef3f82dbb8507fe4bd12365c646e to your computer and use it in GitHub Desktop.
turn svg files into data-uri'd sass-mixins with color-variations
Display the source blob
Display the rendered blob
Raw
<?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>
<?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;
}
}
$ 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.

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