Загрузка SVG в React JS, изменение цвета иконки

В React JS иконку svg можно добавить и через тег img и не то, чтобы это не правильно, но есть одно НО, у иконки нельзя будет поменять цвет, например c помощью css при :hover или других псевдоклассах действий, а это немаловажно для “живых” интерфейсов.

Способ добавления svg иконки в react js

Это всего лишь один из способов, как по мне, он оказался наиболее простым и рабочим.

1. Импортируем иконку как ReactComponet:

import { ReactComponent as KanbanIcon } from '../images/kanban/new/kanban-icon.svg'

2. Далее добавляем нашу иконку в нужное место разметки:

<KanbanIcon className="kanban-icon"/>

Так же мы здесь указали имя класса, с помощью которого в дальнейшем можно будет применять стили к данной иконке.

Подготовка SVG для изменения цвета через css

Открываем в редакторе файл svg, например, он может выглядеть так:

<svg width="20" height="12" viewBox="0 0 20 12" fill="#A1A7AA" xmlns="http://www.w3.org/2000/svg">
<path d="M0 11.8332V10.1665H20V11.8332H0ZM0 5.1665H20V6.83317H0V5.1665ZM20 0.166504V1.83317H0V0.166504H20Z" 
 fill="#A1A7AA"/>
</svg>

Обычно такой файл состоит из основного тега svg и вложенных в него тегов:

• path
• stroke
• circle

Так вот, в этих тегах может встречаться атрибут fill=”#A1A7AA” со значением цвета (как показано выше) или пустой fill=”none”, этот атрибут нужно удалить, будет выглядеть вот так:

<svg width="20" height="12" viewBox="0 0 20 12" fill="#A1A7AA" xmlns="http://www.w3.org/2000/svg">
<path d="M0 11.8332V10.1665H20V11.8332H0ZM0 5.1665H20V6.83317H0V5.1665ZM20 0.166504V1.83317H0V0.166504H20Z"/>
</svg>

Атрибут fill внутри самого тега svg можно оставить и записать в него цвет который нам нужен по умолчанию.

Изменение цвета svg с помощью CSS

Рассмотрим на примере :hover. Вспоминаем, что в самом начале мы добавили класс “kanban-icon” к нашей иконке в react js, теперь пропишем стили:

.list-icon:hover{
  fill: #fff;
  transition: fill 0.3s; 
}
/* или без указания fill в transition, тоже будет работать */
.list-icon:hover{
  fill: #fff;
  transition: 0.3s; 
}

Готово, теперь наша иконка будет менять цвет при наведении мыши. Так же мы добавили свойство transition для плавного изменения цвета.