How you can change svg color when use a svg sprite?

For first, we must understand what is a svg sprite. “An SVG sprite is a single SVG file that contains multiple icons as &ltsvg&gt elements. Each icon has a unique id attribute that you can use to select it.”. For example, I show for you my svg sprite. For first, we need to create a separate svg file. Usually, I create this file in images folder. That file must looks like this

<svg xmlns="http://www.w3.org/2000/svg"
	<symbol viewBox="0 0 96 96" id="footer-icon-instagram">
		<path
			fill="currentColor"
			d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993. . ."
		/>
		</path>
	</symbol>
		<symbol viewBox="0 0 96 96" id="footer-icon-github">
		<path
			fill="currentColor"
			d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993. . ."
		/>
		</path>
	</symbol>
		<symbol viewBox="0 0 96 96" id="footer-icon-linkedin">
		<path
			fill="currentColor"
			d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993. . ."
		/>
		</path>
	</symbol>
</svg>

Before, we can use this icons in our html code in this way;

<svg width="40" height="40" class="footer__social-icon" aria-hidden="true" focusable="false">
	<use xlink:href="images/footer-icons-sprite.svg#footer-icon-instagram"></use>
</svg>

As you can see, I use basic svg tag for wrap and inside this svg I use <use>. Inside <use> you need to write a patch to your svg sprite file in property xlink:href=”your-patch” with unique id from icon that you write in svg sprite. And that’s all what you need for use a svg sprite. But here, we have some problem with modify colors on svg from sprite because in html we really don’t have any svg path or stroke. That problem you can resolve with javascript but this isn’t a very good solution because it will complicate your code and create unnecessary dependencies.

Okey, what resolve I can proposal for you? With the help of my colleagues, I find really cool solution for this. First of all, we need to set a currentColor in fill property on svg sprite file.

<symbol viewBox="0 0 96 96" id="footer-icon-github">
	<path
		fill="currentColor"
		d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993. . ."
	/>
	</path>
</symbol>

That property will give us the opportunity to change color in path. Then, we set a color in svg tag in our html. How we can did it?

<svg width="40" height="40" class="footer__social-icon" aria-hidden="true" focusable="false">
	<use xlink:href="images/footer-icons-sprite.svg#footer-icon-instagram"></use>
</svg>

As you can see, I set a class “footer__social-icon” fro svg tag. In this class, in css, I set a color.

.footer__social-icon {
	color: var(--primary-text);
}

ok, that works. And last problem that I was need to resolve is change the color with hover effect. That’s easy

.footer__social-icon {
	color: var(--primary-text);
	&:hover {
		color: var(--hover-item-color);
	}
}

This is a final version of code. In this case we can change color and change color with hover effect.