guys can someone help me with changing color of of svg on hover, so my jsx is like so where i import img
<img src="./assets/images/vector-info-icon.svg" alt="info-icon" className={styles.infoIcon} onMouseEnter={() => setSlippageTooltipShow(true)} onMouseOut={() => setSlippageTooltipShow(false)} />
then in my css file i target the class infoIcon like so
.infoIcon:hover {
cursor: pointer;
fill: pink;
}
& my svg img file code is this
<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="icon-item" d="M10.0134 2C7.8888 2 5.85125 2.84285 4.34895 4.34315C2.84665 5.84344 2.00267 7.87827 2.00267 10C2.00267 12.1217 2.84665 14.1566 4.34895 15.6569C5.85125 17.1571 7.8888 18 10.0134 18C12.1379 18 14.1755 17.1571 15.6778 15.6569C17.1801 14.1566 18.0241 12.1217 18.0241 10C18.0241 7.87827 17.1801 5.84344 15.6778 4.34315C14.1755 2.84285 12.1379 2 10.0134 2V2ZM0 10C0 4.477 4.48298 0 10.0134 0C15.5437 0 20.0267 4.477 20.0267 10C20.0267 15.523 15.5437 20 10.0134 20C4.48298 20 0 15.523 0 10ZM10.0134 15C10.2789 15 10.5336 14.8946 10.7214 14.7071C10.9092 14.5196 11.0147 14.2652 11.0147 14V10C11.0147 9.73478 10.9092 9.48043 10.7214 9.29289C10.5336 9.10536 10.2789 9 10.0134 9C9.7478 9 9.4931 9.10536 9.30532 9.29289C9.11753 9.48043 9.01203 9.73478 9.01203 10V14C9.01203 14.2652 9.11753 14.5196 9.30532 14.7071C9.4931 14.8946 9.7478 15 10.0134 15ZM10.0134 5C9.7478 5 9.4931 5.10536 9.30532 5.29289C9.11753 5.48043 9.01203 5.73478 9.01203 6C9.01203 6.26522 9.11753 6.51957 9.30532 6.70711C9.4931 6.89464 9.7478 7 10.0134 7H10.0234C10.289 7 10.5436 6.89464 10.7314 6.70711C10.9192 6.51957 11.0247 6.26522 11.0247 6C11.0247 5.73478 10.9192 5.48043 10.7314 5.29289C10.5436 5.10536 10.289 5 10.0234 5H10.0134Z" fill="#9EA0B7"/>
</svg>
i can see the cursor changing to a pointer but my colour doesn't change why?
