Как менять fill у разноцветной url-encoded svg на лету?

На sass я использую функцию для преобразования inline SVG в URL-encoded SVG.

Далее я могу менять цвет svg иконки. Но проблема в том, что мой способ работает только в том случае, если у иконки только один цвет заливки. То есть я меняю знак # - "fill='%23'" на любой цвет "fill='#{$svg-color}'".

Да, для большинства иконок этого всегда хватает, но этот метод, вероятно, не самый оптимальный. Хотелось бы иметь идеальное решение с заменой любого цвета.

Если у вас есть какие-то идеи как это можно реализовать, или, возможно, уже готовые решения, буду очень благодарен если поделитесь.

Посмотреть код на CodePen можно: тут.

Посмотреть код на JSFiddle можно: тут.

<iframe width="100%" height="300" src="//jsfiddle.net/RedEagle69/b02dz4s8/embedded/html,css,result/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>