JSFiddle - React, Tailwind, and code Playground

HTML

<i class="icon">
                                <svg class="icon__svg" width="32px" height="31px" viewBox="0 0 32 31" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                    <g class="lol" id="Desktop" stroke="none" stroke-width="1" fill="#E7E7E7" fill-rule="evenodd">
                                        <g id="1-1-Frontend-Test-Project-Desktop" transform="translate(-1079.000000, -3032.000000)" >
                                            <g id="COMMENTS" transform="translate(239.000000, 2793.000000)">
                                                <g id="Write-a-comment" transform="translate(0.000000, 207.683375)">
                                                    <path d="M843.456412,49.6000412 C843.557943,49.1299549 843.959597,48.7614002 844.462781,48.6947562 L858.719679,47.218748 C859.121779,47.1852023 859.121779,46.5809335 858.719679,46.5142895 L844.462781,45.1393655 C843.959597,45.1062671 843.557943,44.7377123 843.456412,44.2676261 L840.907391,33.2619722 C840.673466,32.3240361 841.679835,31.5515918 842.551574,31.9885797 L870.427555,45.9431191 C871.266196,46.3801069 871.266196,47.5873027 870.427555,48.0220542 L842.551574,61.9103969 C841.679835,62.3473848 840.673466,61.5749405 840.907391,60.6370044 L843.456412,49.6000412 Z" id="icn-send"></path>
                                                </g>
                                            </g>
                                        </g>
                                    </g>
                                </svg>
                            </i>

CSS

.lol {
  transition: fill .3s;
}
.icon:hover .lol {
  fill: red;
}