Как добавить hover эффект svg спрайту?

Question

[Denis1205]

Можно ли добавить ховер эффект такому svg элементу:
вот сама иконка

<svg width="0" height="0" class="hidden">
    <defs>
<symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 33 32" id="instagram-logo">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M16.293 12C14.0838 12 12.293 13.7909 12.293 16C12.293 18.2091 14.0838 20 16.293 20C18.5021 20 20.293 18.2091 20.293 16C20.293 13.7909 18.5021 12 16.293 12ZM10.293 16C10.293 12.6863 12.9793 10 16.293 10C19.6067 10 22.293 12.6863 22.293 16C22.293 19.3137 19.6067 22 16.293 22C12.9793 22 10.293 19.3137 10.293 16Z" fill="#858584"/>
            <path fill-rule="evenodd" clip-rule="evenodd" d="M10.793 5.5C8.03154 5.5 5.79297 7.73858 5.79297 10.5V21.5C5.79297 24.2614 8.03154 26.5 10.793 26.5H21.793C24.5544 26.5 26.793 24.2614 26.793 21.5V10.5C26.793 7.73858 24.5544 5.5 21.793 5.5H10.793ZM3.79297 10.5C3.79297 6.63401 6.92698 3.5 10.793 3.5H21.793C25.659 3.5 28.793 6.63401 28.793 10.5V21.5C28.793 25.366 25.659 28.5 21.793 28.5H10.793C6.92698 28.5 3.79297 25.366 3.79297 21.5V10.5Z" fill="#858584"/>
        </symbol>
    </defs>
</svg>

вот вывод иконки

<a class="socials__link" href="#">
   <svg class="socials__logo">
          <use xlink:href="#instagram-logo"></use>
    </svg>
</a>

Как добавить ховер эффект (закрасить в другой цвет) если я вывожу иконку таким образом?
Я перепробовал все стандартные варианты:

.socials__link:hover svg{
  fill: red;
}

#instagram-logo:hover path {
  fill: red !important;
}

.socials__link:hover svg path{
  fill: red;
}

// и всё в этом духе

Ссылка на codepen

Answer 1

[Ankhena]

Убираете инлайновый fill и красите на здоровье

.socials__link:hover {
  fill: red;
}

А ещё лучше перейти с символьных спрайтов на стеки и не мусорить в разметке, а использовать mask
Сборка стеков, например: https://www.npmjs.com/package/gulp-stacksvg
Также они вставятся и в use и в css в качестве content, bg или mask.
Про маски https://codepen.io/noahblon/post/coloring-svgs-in-...