Как поменять цвет иконки соц. сетей по центре исключительно через css, при наведении?

Question

[Роберт Емельянов]

<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M26 14a12 12 0 1 1-24 0 12 12 0 0 1 24 0Zm-11.6-3.1a563.2 563.2 0 0 0-7.9 3.6c0 .4.5.5 1 .7l.3.1c.6.2 1.5.5 1.9.5.4 0 .8-.2 1.3-.5a123.2 123.2 0 0 1 5.3-3.3v.2a34 34 0 0 1-3.5 3.5c-.6.5-1 1 0 1.6l1.3.9a88.8 88.8 0 0 0 1.8 1.2c.5.4 1 .7 1.5.6.3 0 .6-.3.8-1.2a143 143 0 0 0 1.3-9.1l-.1-.3a.8.8 0 0 0-.5-.2c-.4 0-1.1.3-4.5 1.7Z" fill="#FCFCFC"/><rect x="1" y="1" width="26" height="26" rx="13" stroke="#FCFCFC" stroke-opacity=".3" stroke-width="2"/>
</svg>

fill="#FCFCFC" - можно задать цвет currentcolor и в css по :hover задать цвет через fill любой цвет.

stroke="#FCFCFC" - это цвет обводки.

fill="none" - предполагал что это и есть цвет иконки по центру, которой мне нужно менять при различных состояниях. Но когда ставлю любой цвет fill="none"(переделываю на fill="red") прямо в html файле(для теста) то все закрашивается другим красным цветом включая бордер.

Как поменять цвет только у центральной инонки?

Answer 1

[LJ322]

Иконка состоит из окружности вокруг и элемента, который описывает внешнюю фигуру. Грубо говоря, стрелка по центру это не иконка, а то, что осталось. И принимает она цвет background своего родителя. Можно добавить обёртку для svg и менять у неё background-color. Либо попросить дизайнера отрисовать иконку по-другому