How to replace the value of the fill attribute in the svg image code with any other custom value in the gulp-svg-sprite plugin

Asked Oct 28 '22 at 12:52

Active Oct 28 '22 at 16:32

Viewed 28 times

For example i want replace fill attribute fill="#87B0EE" in svg image code that way that i can have access to it and can change it states via css variables. Like this: fill="var(--color,#87B0EE)". That because shadow-root not allow have access to some tags in svg image code and it does not allow, for example, the path tag to inherit the property of its parent.

I use the gulp-svg-sprite plugin to create an svg sprite. It has settings where I can remove some attributes if necessary and many many others settings. But I can't find a way how I can replace it with some custom value.

Im using inline svg and insert it via use tag:

<svg class="contact__email-image" viewBox="0 0 16 12" width="16" height="12">
    <use xlink:href="img/icons/icons.svg#mail-black-envelope-symbol"></use>
</svg>

I think my task is to create a function that can replace an attribute in the svg code and insert it into the gulp svg sprite plugin in such a way that it can work. I know how to change the color of an svg image, but I will have to add my own attribute parameter to each svg image each time. I would like to automate this process without doing it manually every time.

edited Oct 28 '22 at 16:32

asked Oct 28 '22 at 12:52

Rinatster

you're using SVG as an image e.g. as a background-image or via an img tag? – Robert Longson Oct 28 '22 at 13:15
I use inline svg via use tag. I edited the question. – Rinatster Oct 28 '22 at 13:26
You can only style that like an image. – Robert Longson Oct 28 '22 at 15:06

How to replace the value of the fill attribute in the svg image code with any other custom value in the gulp-svg-sprite plugin

0 Answers0