Как добавить SVG иконки в React | React SVG

Подключение SVG иконок в React

Экспортируем иконки как SVG-файлы и даем им названия.

Рассматриваем четыре основных способа подключения иконок в React:

Подключаем иконки как обычные картинки, импортируя адреса иконок, создавая ссылки и добавляя теги.

Вставляем иконки онлайн, открывая каждую иконку, беря ее содержимое и вставляя в разметку.

• Импортируем иконки как React-компоненты, используя конструкцию "import ReactComponent".

Создаем свой компонент "Icon", который может включать фантазию и передавать переменные в виде пропсов.

Создаем свой компонент "Icon", который может включать фантазию и передавать переменные в виде пропсов.

Минусы: требует больше времени, может разрастаться в целый комбайн.

Используем SVG спрайт как фон и меч, но с бэкграунд позишн.

Минусы: требует много времени, нет возможности плавной смены цвета иконки.

Используем SVG спрайт как фон и меч, но с бэкграунд позишн.

Минусы: большие затраты времени, нет доступа внутрь SVG, можно менять цвет только наследуя его от родителя.

Плюсы: SVG загружается один раз, иконки не дублируются.