БЛОГ НА HUSL


Как правильно вставлять в сайт иконки

Автор вопроса: Константин

Как правильно работать с иконками на сайте?

Как я понимаю, необходимо использовать SVG-иконки. Но такой вопрос, а если надо например, чтобы при наведении цвет иконки менялся?


Источник

Ответы (2 шт):

Автор решения: Alexandr_TT

Если вы добавляете иконку SVG в HTML документ инлайн, то есть просто копируете код иконки внутрь HTML, то проблем со стилизацией из внешней CSS, вообще нет.

Задаете цвет иконки в исходном состоянии и при наведении.

svg {
    width: 100px;
    } 
 #path {
 fill:black;
 transition: all 0.5s;
 }  
  #path:hover {
   fill:crimson;
  }
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>
  <path id="path" d='M7 15h2v-2h-2v2zm1-14a4 4 90 00-4 4h2c0-1 1-2 2-2s2 1 2 2c0 2-3 2-3 6h2c0-3 3-3 3-6a4 4 90 00-4-4z'/>
</svg>

Ещё вариант с использованием css filter drop-shadow

svg {
    width: 100px;
    transition: all 0.5s;
    } 
  svg:hover {
  filter: drop-shadow(0 0 20px dodgerblue);
  }
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>
  <path d='M7 15h2v-2h-2v2zm1-14a4 4 90 00-4 4h2c0-1 1-2 2-2s2 1 2 2c0 2-3 2-3 6h2c0-3 3-3 3-6a4 4 90 00-4-4z'/>
</svg>

Иконка добавлена из внешнего ресурса с помощью тега <img>

В этом случае цвет иконки можно менять при наведении с помощью фильтров CSS или SVG

img 
{
width:100px;
height:100px;
}
img:hover {
filter: hue-rotate(90deg);
}
<img src="https://twemoji.maxcdn.com/svg/1f511.svg">

Другие способы добавления SVG в HTML

→ Ссылка
Автор решения: ᅠhᅠ

Исходный код иконки конверта:

<svg width="16" height="13" viewBox="0 0 16 13" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16 3.373V10.5C16 11.163 15.7366 11.7989 15.2678 12.2678C14.7989 12.7366 14.163 13 13.5 13H2.5C1.83696 13 1.20107 12.7366 0.732233 12.2678C0.263392 11.7989 0 11.163 0 10.5V3.373L7.746 7.931C7.82295 7.97638 7.91066 8.00032 8 8.00032C8.08934 8.00032 8.17705 7.97638 8.254 7.931L16 3.373ZM13.5 3.09527e-08C14.1151 -9.6716e-05 14.7087 0.226607 15.1672 0.63674C15.6257 1.04687 15.9168 1.61164 15.985 2.223L8 6.92L0.0150001 2.223C0.0831583 1.61164 0.374324 1.04687 0.832795 0.63674C1.29127 0.226607 1.88485 -9.6716e-05 2.5 3.09527e-08H13.5Z" fill="white"/>
</svg>

Исходный код иконки поинта:

<svg width="12" height="17" viewBox="0 0 12 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.83333 7.91667C5.2808 7.91667 4.7509 7.69717 4.36019 7.30647C3.96949 6.91577 3.75 6.38587 3.75 5.83333C3.75 5.2808 3.96949 4.7509 4.36019 4.36019C4.7509 3.96949 5.2808 3.75 5.83333 3.75C6.38587 3.75 6.91577 3.96949 7.30647 4.36019C7.69717 4.7509 7.91667 5.2808 7.91667 5.83333C7.91667 6.10692 7.86278 6.37783 7.75808 6.63059C7.65339 6.88335 7.49993 7.11302 7.30647 7.30647C7.11302 7.49993 6.88335 7.65339 6.63059 7.75808C6.37783 7.86278 6.10692 7.91667 5.83333 7.91667V7.91667ZM5.83333 0C4.28624 0 2.80251 0.614582 1.70854 1.70854C0.614582 2.80251 0 4.28624 0 5.83333C0 10.2083 5.83333 16.6667 5.83333 16.6667C5.83333 16.6667 11.6667 10.2083 11.6667 5.83333C11.6667 4.28624 11.0521 2.80251 9.95812 1.70854C8.86416 0.614582 7.38043 0 5.83333 0V0Z" fill="white"/>
</svg>

Можно вставлять SVG код прямо в HTML разметку, он может казаться там поначалу чуждым, но это нормальная практика и единственная возможность работать с отдельными его частями. Чтобы поменять цвет через CSS, нужно у элементов которые будут перекрашиваться убрать атрибуты fill или stroke (смотря что будет перекрашиваться).

svg {
  width: 9vmax;
  height: 9vmax;
}

.icon-1 {
  fill: tomato;
  transition: fill 0.4s;
}

.icon-1:hover {
  fill: lightgreen;
}

.icon-2 {
  fill: none;
  stroke: tomato;
  transition: stroke 0.4s;
}

.icon-2:hover {
  stroke: lightgreen;
}
<!-- icon 1 -->
<svg class="icon-1" viewBox="0 0 16 13" xmlns="http://www.w3.org/2000/svg">
<path d="M16 3.373V10.5C16 11.163 15.7366 11.7989 15.2678 12.2678C14.7989 12.7366 14.163 13 13.5 13H2.5C1.83696 13 1.20107 12.7366 0.732233 12.2678C0.263392 11.7989 0 11.163 0 10.5V3.373L7.746 7.931C7.82295 7.97638 7.91066 8.00032 8 8.00032C8.08934 8.00032 8.17705 7.97638 8.254 7.931L16 3.373ZM13.5 3.09527e-08C14.1151 -9.6716e-05 14.7087 0.226607 15.1672 0.63674C15.6257 1.04687 15.9168 1.61164 15.985 2.223L8 6.92L0.0150001 2.223C0.0831583 1.61164 0.374324 1.04687 0.832795 0.63674C1.29127 0.226607 1.88485 -9.6716e-05 2.5 3.09527e-08H13.5Z"/>
</svg>

<!-- icon 2 -->
<svg class="icon-2" viewBox="0 0 12 17" xmlns="http://www.w3.org/2000/svg">
<path d="M5.83333 7.91667C5.2808 7.91667 4.7509 7.69717 4.36019 7.30647C3.96949 6.91577 3.75 6.38587 3.75 5.83333C3.75 5.2808 3.96949 4.7509 4.36019 4.36019C4.7509 3.96949 5.2808 3.75 5.83333 3.75C6.38587 3.75 6.91577 3.96949 7.30647 4.36019C7.69717 4.7509 7.91667 5.2808 7.91667 5.83333C7.91667 6.10692 7.86278 6.37783 7.75808 6.63059C7.65339 6.88335 7.49993 7.11302 7.30647 7.30647C7.11302 7.49993 6.88335 7.65339 6.63059 7.75808C6.37783 7.86278 6.10692 7.91667 5.83333 7.91667V7.91667ZM5.83333 0C4.28624 0 2.80251 0.614582 1.70854 1.70854C0.614582 2.80251 0 4.28624 0 5.83333C0 10.2083 5.83333 16.6667 5.83333 16.6667C5.83333 16.6667 11.6667 10.2083 11.6667 5.83333C11.6667 4.28624 11.0521 2.80251 9.95812 1.70854C8.86416 0.614582 7.38043 0 5.83333 0V0Z"/>
</svg>

Если иконок много и с ними никаких сложным манипуляций делать не нужно, то можно создать спрайт, делается он следующим образом:

<svg xmlns="http://www.w3.org/2000/svg">
   <!-- svg заменяем на symbol, убираем все кроме viewBox, и задаем id(название иконки)-->
   <symbol id="svg-mail" viewBox="0 0 16 13">
     <path d="M16 3.373V10.5C16 11.163 15.7366 11.7989 15.2678 12.2678C14.7989 12.7366 14.163 13 13.5 13H2.5C1.83696 13 1.20107 12.7366 0.732233 12.2678C0.263392 11.7989 0 11.163 0 10.5V3.373L7.746 7.931C7.82295 7.97638 7.91066 8.00032 8 8.00032C8.08934 8.00032 8.17705 7.97638 8.254 7.931L16 3.373ZM13.5 3.09527e-08C14.1151 -9.6716e-05 14.7087 0.226607 15.1672 0.63674C15.6257 1.04687 15.9168 1.61164 15.985 2.223L8 6.92L0.0150001 2.223C0.0831583 1.61164 0.374324 1.04687 0.832795 0.63674C1.29127 0.226607 1.88485 -9.6716e-05 2.5 3.09527e-08H13.5Z"/>
   </symbol>
  
  <symbol id="svg-point" viewBox="0 0 12 17">
    <path d="M5.83333 7.91667C5.2808 7.91667 4.7509 7.69717 4.36019 7.30647C3.96949 6.91577 3.75 6.38587 3.75 5.83333C3.75 5.2808 3.96949 4.7509 4.36019 4.36019C4.7509 3.96949 5.2808 3.75 5.83333 3.75C6.38587 3.75 6.91577 3.96949 7.30647 4.36019C7.69717 4.7509 7.91667 5.2808 7.91667 5.83333C7.91667 6.10692 7.86278 6.37783 7.75808 6.63059C7.65339 6.88335 7.49993 7.11302 7.30647 7.30647C7.11302 7.49993 6.88335 7.65339 6.63059 7.75808C6.37783 7.86278 6.10692 7.91667 5.83333 7.91667V7.91667ZM5.83333 0C4.28624 0 2.80251 0.614582 1.70854 1.70854C0.614582 2.80251 0 4.28624 0 5.83333C0 10.2083 5.83333 16.6667 5.83333 16.6667C5.83333 16.6667 11.6667 10.2083 11.6667 5.83333C11.6667 4.28624 11.0521 2.80251 9.95812 1.70854C8.86416 0.614582 7.38043 0 5.83333 0V0Z"/>
  </symbol>
  
</svg>

Сохраняем этот код в файл с любым названием, пусть будет icons.svg и используем на странице следующим образом:

<svg class="icon-1">
  <!-- assets/images/icons/icons.svg - путь до файла -->
  <!-- #svg-mail - id икноки -->
  <use xlink:href="assets/images/icons/icons.svg#svg-mail"></use>
</svg>

<svg class="icon-2">
  <use xlink:href="assets/images/icons/icons.svg#svg-point"></use>
</svg>

Либо можно не сохранять в файл и вставить код этого спрайта в начало страницы, скрыв его при этом с помощью display: none:

svg {
  width: 10vmax;
  height: 10vmax;
}

.icon-1 {
  fill: tomato;
  transition: fill 0.4s;
}

.icon-1:hover {
  fill: lightgreen;
}

.icon-2 {
  fill: none;
  stroke: tomato;
  transition: stroke 0.4s;
}

.icon-2:hover {
  stroke: lightgreen;
}
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
   <symbol id="svg-mail" viewBox="0 0 16 13">
     <path d="M16 3.373V10.5C16 11.163 15.7366 11.7989 15.2678 12.2678C14.7989 12.7366 14.163 13 13.5 13H2.5C1.83696 13 1.20107 12.7366 0.732233 12.2678C0.263392 11.7989 0 11.163 0 10.5V3.373L7.746 7.931C7.82295 7.97638 7.91066 8.00032 8 8.00032C8.08934 8.00032 8.17705 7.97638 8.254 7.931L16 3.373ZM13.5 3.09527e-08C14.1151 -9.6716e-05 14.7087 0.226607 15.1672 0.63674C15.6257 1.04687 15.9168 1.61164 15.985 2.223L8 6.92L0.0150001 2.223C0.0831583 1.61164 0.374324 1.04687 0.832795 0.63674C1.29127 0.226607 1.88485 -9.6716e-05 2.5 3.09527e-08H13.5Z"/>
   </symbol>
  
  <symbol id="svg-point" viewBox="0 0 12 17">
    <path d="M5.83333 7.91667C5.2808 7.91667 4.7509 7.69717 4.36019 7.30647C3.96949 6.91577 3.75 6.38587 3.75 5.83333C3.75 5.2808 3.96949 4.7509 4.36019 4.36019C4.7509 3.96949 5.2808 3.75 5.83333 3.75C6.38587 3.75 6.91577 3.96949 7.30647 4.36019C7.69717 4.7509 7.91667 5.2808 7.91667 5.83333C7.91667 6.10692 7.86278 6.37783 7.75808 6.63059C7.65339 6.88335 7.49993 7.11302 7.30647 7.30647C7.11302 7.49993 6.88335 7.65339 6.63059 7.75808C6.37783 7.86278 6.10692 7.91667 5.83333 7.91667V7.91667ZM5.83333 0C4.28624 0 2.80251 0.614582 1.70854 1.70854C0.614582 2.80251 0 4.28624 0 5.83333C0 10.2083 5.83333 16.6667 5.83333 16.6667C5.83333 16.6667 11.6667 10.2083 11.6667 5.83333C11.6667 4.28624 11.0521 2.80251 9.95812 1.70854C8.86416 0.614582 7.38043 0 5.83333 0V0Z"/>
  </symbol>
</svg>

<header></header>
<main>
  <svg class="icon-1">
    <use xlink:href="#svg-mail"></use>
  </svg>

  <svg class="icon-2">
    <use xlink:href="#svg-point"></use>
  </svg>
</main>
<footer></footer>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.