Зміна SVG іконок

Метод №1: сховати/показати SVG елемент

Включаємо обидві іконки:

<a href="#0" class="expand-link">
  <svg class="icon icon-expand" viewBox="0 0 32 32"><use xlink:href="#icon-expand"></use></svg>
  <svg class="icon icon-contract" viewBox="0 0 32 32"><use xlink:href="#icon-contract"></use></svg>
</a>

Приховуємо одну:

.expand-link .icon-contract {
  display: none;
}

Коли стан змінюється, змінюємо властивість display:

.expand-link:hover .icon-expand,
.expand-link:active .icon-expand{
  display: none;
}
.expand-link:hover .icon-contract,
.expand-link:active .icon-contract{
  display: block;
}

Метод №2: сховати/показати шлях

Ви не зможете використати спосіб <use> (зміна HTML-елементу відбувається на рівень вище тіні кореня, який створює <use>, таким чином, неможливо задіяти CSS), але ви можете сховати/показати форму елемента, якщо вбудований SVG в “сирому” вигляді:

<a href="#0"class="icon-expand-link">
  <svg ... >
    <path class="expand" d="M32 0v12l-etc"></path>
    <path class="contract" d="M2 18h12v12l-etc"></path>
  </svg>
</a>

.icon-expand-link .contract {
  display: none;
}
.icon-expand-link:hover .expand {
  display: none;
}
.icon-expand-link:hover .contract {
  display: block;
}

Метод №3: зміна xlink:href

Використовуючи JavaScript, можна змінити SVG, на який посилається <use>. Модифікування елементів з допомогою JavaScript здається дивним, але розмітка, яка не дублюється - це добре, і якщо ви посилаєтеся на <symbol>, <title> і <desc> теж зміняться, що теж приємно.

<a href="#0" class="expand-link">
  <svg class="icon icon-expand" viewBox="0 0 32 32"><use id="target" xlink:href="#icon-expand"></use></svg>
</a>

$(".expand-link")
  .on("mouseenter", function() {
    $(this).find("use").attr("xlink:href", "#icon-contract");
  })
  .on("mouseleave", function() {
    $(this).find("use").attr("xlink:href", "#icon-expand");
  });

Метод № 4: модифікування використовуючи CSS

Пам'ятайте, що ви можете зробити багато корисного з CSS. Можливо, вам не потрібно зовсім інший набір форм, тому що з допомогою CSS можна створити новий значок. Також ви можете використати CSS transforms і rotate/scale/move:

Не використовуєте SVG?

Якщо ви не використовуєте вбудований SVG, але замість цього користуєтесь SVG як <img>, то методи №1 та №3 повинні працювати нормально.

Якщо ви використовуєте SVG в якості фонового зображення, зміна джерела - робочий варіант.

Джерело