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
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
<?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