JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"> </script>
    <div ng-app>
<svg xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 18.75 18.75"
     width="18.75"
     height="18.75"
     version="1.1"
     ng-mouseenter="data.color = 'red';"
     ng-mouseleave="data.color = 'green';"> 
     <g transform="translate(-522.05357,-691.55861)">
        <g transform="matrix(1.25,0,0,-1.25,522.05357,700.93361)">
            <path d="M0,0c0,4.142,3.358,7.5,7.5,7.5s7.5-3.358,7.5-7.5-3.358-7.5-7.5-7.5-7.5,3.358-7.5,7.5"
                  fill-rule="nonzero"
                  fill="#CCC"
                  ng-attr-fill="{{data.color || '#CCC'}}"/>
        </g>
    </g>
</svg>
<div>