Собственно, как составить каскад в css, чтобы поменять цвет svg в спрайте? Перепробовал много разных вариантов, в итоге - ничего не получилось.
Если просто вставить код svg в html - таких проблем не возникает, обращаюсь к path {fill: black} и всё хорошо работает, а тут логику понять не получается.
use.ewq svg path {
fill: blue
}
<svg style="display: none;" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><symbol viewBox="0 0 25 25" fill="none" id="svg-geo"><g clip-path="url(#aa)"><path d="M12.5498 24.5498C12.5498 24.5498 21.5498 16.0208 21.5498 9.5498C21.5498 7.16286 20.6016 4.87367 18.9138 3.18584C17.2259 1.49802 14.9368 0.549805 12.5498 0.549805C10.1629 0.549805 7.87367 1.49802 6.18584 3.18584C4.49802 4.87367 3.5498 7.16286 3.5498 9.5498C3.5498 16.0208 12.5498 24.5498 12.5498 24.5498ZM12.5498 14.0498C11.3563 14.0498 10.2117 13.5757 9.36782 12.7318C8.52391 11.8879 8.0498 10.7433 8.0498 9.5498C8.0498 8.35633 8.52391 7.21174 9.36782 6.36782C10.2117 5.52391 11.3563 5.0498 12.5498 5.0498C13.7433 5.0498 14.8879 5.52391 15.7318 6.36782C16.5757 7.21174 17.0498 8.35633 17.0498 9.5498C17.0498 10.7433 16.5757 11.8879 15.7318 12.7318C14.8879 13.5757 13.7433 14.0498 12.5498 14.0498Z" fill="#F24957"/></g><defs><clipPath id="aa"><path fill="#fff" transform="translate(.55 .55)" d="M0 0H24V24H0z"/></clipPath></defs></symbol></svg>
<svg>
<use class='ewq' xlink:href='#svg-geo'></use>
</svg>
На всякий случай оставляю пример приведённый в codepen https://codepen.io/myrumpel/pen/PoyEvox