How to change fill of multi-colored url-encoded svg on the fly?

Question

Sass

On  sass , I use a function to convert inline SVG to  URL-encoded SVG .
Next, I can change the color of the svg icon. But the problem is that my method only works if the icon has only one fill color. That is, I change the sign # - "fill='%23'"to any color "fill='#{$svg-color}'".
Yes, for most icons this is always enough, but this method is probably not the best.
I would like to have a perfect solution with the replacement of any color.
If you have any ideas on how this can be implemented, or, perhaps, ready-made solutions, I will be very grateful if you share.
You can view the code on CodePen here:
See the Pen Svg-Url-Color-Change by Alex Prisyazhnyuk
( @Red_Eagle ) on CodePen .

Answer 1

Try to change not fill, but class.