SVG fill not updating
I am trying to make my last star color gray. I have selected and written the style but its simply not applying. How can I fix?
That start svg
Please help me
<div class="d-flex column-gap-2">
<img src="./assets/images/star.svg" alt="Star">
<img src="./assets/images/star.svg" alt="Star">
<img src="./assets/images/star.svg" alt="Star">
<img src="./assets/images/star.svg" alt="Star">
<img class="gray-star" src="./assets/images/star.svg" alt="Star">
</div><div class="d-flex column-gap-2">
<img src="./assets/images/star.svg" alt="Star">
<img src="./assets/images/star.svg" alt="Star">
<img src="./assets/images/star.svg" alt="Star">
<img src="./assets/images/star.svg" alt="Star">
<img class="gray-star" src="./assets/images/star.svg" alt="Star">
</div> img[alt="Star"] {
transform: none;
}
.gray-star {
fill: gray !important;
} img[alt="Star"] {
transform: none;
}
.gray-star {
fill: gray !important;
}That start svg
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="15.239" viewBox="0 0 16 15.239">
<path id="f35e3bcbde3528bceb03a6a775c06def" d="M-54.987,56.259c-.569.405-4.222-2.165-4.921-2.17s-4.393,2.505-4.956,2.091.76-4.673.549-5.338-3.747-3.392-3.526-4.054,4.691-.723,5.261-1.129,2.077-4.6,2.777-4.6,2.139,4.226,2.7,4.64,5.031.548,5.242,1.213-3.369,3.335-3.591,4S-54.418,55.854-54.987,56.259Z" transform="translate(67.851 -41.064)" fill="#f8b84e"/>
</svg><svg xmlns="http://www.w3.org/2000/svg" width="16" height="15.239" viewBox="0 0 16 15.239">
<path id="f35e3bcbde3528bceb03a6a775c06def" d="M-54.987,56.259c-.569.405-4.222-2.165-4.921-2.17s-4.393,2.505-4.956,2.091.76-4.673.549-5.338-3.747-3.392-3.526-4.054,4.691-.723,5.261-1.129,2.077-4.6,2.777-4.6,2.139,4.226,2.7,4.64,5.031.548,5.242,1.213-3.369,3.335-3.591,4S-54.418,55.854-54.987,56.259Z" transform="translate(67.851 -41.064)" fill="#f8b84e"/>
</svg>Please help me
