JSFiddle - React, Tailwind, and code Playground
HTML
<svg style="display:none">
<symbol id="like-icon" viewBox="0 0 16 15">
<path class="like-icon__inside" fill-rule="evenodd" clip-rule="evenodd" d="M4.89285 1C6.37921 1 7.12139 1.95643 7.76901 2.83965C7.88444 2.99707 8.11555 2.99707 8.23099 2.83965C8.87861 1.95643 9.62079 1 11.1072 1C13.2571 1 15 2.76727 15 4.9473C15 7.91499 12.0596 10.5504 9.66336 12.6982C9.22184 13.0939 8.79878 13.4731 8.416 13.8347C8.18275 14.0551 7.81725 14.0551 7.584 13.8347C7.20122 13.4731 6.77816 13.0939 6.33664 12.6982C3.94037 10.5504 1 7.91499 1 4.9473C1 2.76727 2.74289 1 4.89285 1Z" />
<path class="like-icon__stroke" d="M11.1072 1V2V1ZM9.66336 12.6982L10.3308 13.4428L10.3308 13.4428L9.66336 12.6982ZM6.33664 12.6982L5.6692 13.4428L5.6692 13.4428L6.33664 12.6982ZM8.416 13.8347L9.10276 14.5616L9.10276 14.5616L8.416 13.8347ZM7.584 13.8347L8.27076 13.1078L7.584 13.8347ZM7.76901 2.83965L6.96258 3.43097L7.76901 2.83965ZM8.23099 2.83965L9.03742 3.43097L8.23099 2.83965ZM8.57545 2.24832C7.9364 1.37681 6.92595 0 4.89285 0V2C5.83248 2 6.30638 2.53606 6.96258 3.43097L8.57545 2.24832ZM9.03742 3.43097C9.69362 2.53606 10.1675 2 11.1072 2L11.1072 0C9.07405 0 8.0636 1.37681 7.42455 2.24832L9.03742 3.43097ZM11.1072 2C12.6918 2 14 3.30641 14 4.9473H16C16 2.22813 13.8224 0 11.1072 0V2ZM14 4.9473C14 6.09911 13.4259 7.28024 12.4482 8.50699C11.4751 9.72815 10.2066 10.8684 8.99592 11.9535L10.3308 13.4428C11.5164 12.3802 12.9162 11.1288 14.0123 9.75343C15.104 8.38361 16 6.76318 16 4.9473H14ZM8.99592 11.9535C8.55668 12.3472 8.12336 12.7355 7.72925 13.1078L9.10276 14.5616C9.4742 14.2107 9.88699 13.8406 10.3308 13.4428L8.99592 11.9535ZM5.6692 13.4428C6.11301 13.8406 6.5258 14.2107 6.89725 14.5616L8.27076 13.1078C7.87664 12.7355 7.44332 12.3472 7.00408 11.9535L5.6692 13.4428ZM0 4.9473C0 6.76318 0.896038 8.38361 1.98768 9.75343C3.08376 11.1288 4.48361 12.3802 5.6692 13.4428L7.00408 11.9535C5.7934 10.8684 4.52493 9.72815 3.55176 8.50699C2.57415 7.28024 2 6.09911 2 4.9473H0ZM4.89285 0C2.17755 0 0 2.22813 0...
CSS
.like-icon {
cursor: pointer;
}
.like-icon__inside {
fill: transparent;
}
.like-icon__stroke {
fill: #BDBDBD;
}
.like-icon:hover {
/* fill: #499DDE; */
}
.like-icon:hover .like-icon__stroke {
fill: #499DDE;
transition: fill 0.2s ease-out;
}