JSFiddle - React, Tailwind, and code Playground

by oilvier

HTML

<svg style="position: absolute; height: 0; width: 0;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><symbol id="symbol-heart" viewBox="0 0 22 20"><path class="primaryPath" d="M20.2 1.8C19.1.7 17.5 0 15.9 0c-1.6 0-3.2.6-4.3 1.6l-.2.2-.4.4-.4-.4C9.5.7 8 0 6.3 0 4.7 0 3.2.6 2 1.7l-.2.1c-2.4 2.5-2.4 6.5 0 8.9L11 20l9.2-9.3c2.4-2.5 2.4-6.5 0-8.9z" /></symbol></svg>
<div class="crtStep">
	<svg aria-hidden="true" width="22" height="20">
	<use xlink:href="#symbol-heart"></use>
  </svg>

</div>
<div class="crtStep is-active">
	<svg aria-hidden="true" width="22" height="20">
	<use xlink:href="#symbol-heart"></use>
  </svg>

</div>
<div class="crtStep">
	<svg aria-hidden="true" width="22" height="20">
	<use xlink:href="#symbol-heart"></use>
  </svg>
</div>
<div class="crtStep">
	<svg aria-hidden="true" width="22" height="20">
	<use xlink:href="#symbol-heart"></use>
  </svg>
</div>

CSS

svg {
	width: 1em;
	height: 1em;
}

.crtStep svg .primaryPath {
	fill: green;
}
.crtStep.is-active ~ .crtStep svg .primaryPath {
	fill: red;
}