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

Question

[Александр Присяжнюк]

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

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

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

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

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

See the Pen Svg-Url-Color-Change by Alex Prisyazhnyuk
(@Red_Eagle) on CodePen.

Answer 1

[RAX7]

Попробуй менять не fill, а class.
Look at my horse, My horse is amazing! by RAX7

Comments

[Александр Присяжнюк]

Спасибо, идея с классами хороша. Возьму на заметку.

Хотелось бы отметить, что вы используете старую версию функции jakob-e. Вот её обновлённая версия. Там почти ничего не изменилось, кроме добавления проверки на отсутствие xmlns и удалён не обязательный параметр кодировки charset=utf8 с @return.

[RAX7]

Александр Присяжнюк, спасибо, учту)