svg ikona – zmiana koloru na hover w css

Umieszczamy ikonę svg jako symbol, najlepiej w stopce strony w elemencie svg z dodanym style=”display: none;”

  <symbol id="icon_heart">
    <path d="M412.4,87.48c-2.18-8.77-5.82-23.46-16.64-39.07c-9.85-14.2-20.73-22.38-25.36-25.87c-4.75-3.57-14.61-10.99-29.8-16.4
      c-6.78-2.42-20.86-6.44-38.86-6.12c-11.96,0.22-30.29,2.53-49.65,12.32c-8.26,4.18-20.62,11.84-32.68,24.64
      c-3.8,4.04-7.34,8.37-10.58,12.91c-3.7-4.61-7.68-9.02-11.86-13.15c-6.59-6.51-16.54-16.35-32.42-24.39
      c-19.36-9.79-37.69-12.1-49.66-12.32C96.92-0.3,82.83,3.72,76.04,6.13c-15.19,5.41-25.05,12.84-29.79,16.4
      c-4.65,3.49-15.52,11.67-25.36,25.87C10.06,64.02,6.42,78.71,4.25,87.48c-8.56,34.55-2.26,64.1,2.26,78.64
      c3.41,10.96,6.99,17.96,14.12,31.91l0.3,0.56c1.32,2.8,3.98,7.59,8.72,15.69c5.15,8.81,13.33,22.07,23,35.25
      c20.49,27.89,74.74,89.58,149.75,164.5l7.08,7.07l7-7.15c73.63-75.07,127.14-136.68,147.52-164.42c9.67-13.17,17.85-26.44,23-35.25
      c4.57-7.8,7.21-12.54,8.57-15.38l0.46-0.87c7.13-13.95,10.71-20.94,14.11-31.91C414.66,151.59,420.97,122.04,412.4,87.48z
       M38.26,188.98c-6.81-13.33-9.92-19.41-12.83-28.74c-3.91-12.56-9.36-38.1-1.95-67.99c1.97-7.93,4.94-19.92,13.7-32.55
      c8.02-11.57,17.11-18.41,20.98-21.32c3.95-2.97,12.19-9.17,24.53-13.57c5.52-1.97,17-5.22,31.84-4.97
      c9.9,0.17,25.06,2.09,41.07,10.19c13.1,6.63,21.39,14.82,27.44,20.8c6.8,6.72,12.9,14.19,18.13,22.21l9.13,14.01l7.91-14.73
      c4.24-7.91,9.51-15.22,15.64-21.74c7.88-8.37,17.53-15.66,27.2-20.55c16.01-8.1,31.16-10.01,41.06-10.19
      c14.8-0.29,26.32,2.99,31.84,4.97c12.34,4.4,20.58,10.6,24.54,13.57c3.88,2.91,12.96,9.75,20.98,21.32
      c8.75,12.63,11.73,24.62,13.69,32.55c7.41,29.88,1.96,55.43-1.95,67.99c-2.89,9.34-6.01,15.42-12.85,28.77
      c-0.12,0.25-12.84,24.96-30.33,48.79c-19.11,26.02-69.33,83.96-138.7,155.11C138.68,321.9,87.81,263.93,68.62,237.8
      c-17.52-23.86-30.21-48.54-30.34-48.79l-2.21,1.13L38.26,188.98z"/>
  </symbol>

Następnei umieszczamy odowłanie do symbiolu w linku:

<a href="#">
  <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 283.5 283.5">
      <use class="icon_svg icon_heart" xlink:href="#icon_heart" x="0" y="0" />
  </svg>
</a>

i w stylach css dodajemy regułę pozwaljaca na płynną zmianę kolory po najechaniu na link:

a
  .icon_svg
    fill: black
    transition: fill .3s ease-in-out
  &:hover
    .icon_svg
      fill: red

svg ikona – zmiana koloru na hover w css

#svg