JSFiddle - React, Tailwind, and code Playground

by Rafael_

HTML

<label>
<input type="checkbox">

<svg class="heart"
   xml:space="preserve"
   width="60px"
   height="50px"
   version="1.0"
   shape-rendering="geometricPrecision"
   text-rendering="geometricPrecision"
   image-rendering="optimizeQuality"
   fill-rule="evenodd"
   clip-rule="evenodd"
   viewBox="0 0 4.12 3.4"
   id="svg1893"
   sodipodi:docname="Heart-1.svg"
   inkscape:version="1.2.2 (732a01da63, 2022-12-09)"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:svg="http://www.w3.org/2000/svg">
 <g
   id="Capa_x0020_1"
   inkscape:label="Capa 1">
  <metadata
   id="CorelCorpID_0Corel-Layer" />
  <path
   fill-rule="nonzero"
   d="M2.06 0.64c0.25,-0.43 0.51,-0.64 1.03,-0.64 0.56,0 1.03,0.38 1.03,0.85 0,0.85 -1.03,1.7 -2.06,2.55 -1.03,-0.85 -2.06,-1.7 -2.06,-2.55 0,-0.47 0.46,-0.85 1.03,-0.85 0.51,0 0.77,0.21 1.03,0.64z"
   id="path1890" />
 </g>
</svg>
</label>

CSS

input {display: none;}
:checked+svg {fill: red; transition: .5s;}