Работа с SVG в React | Как добавить SVG иконки в React приложение?

[@wannabecoder3960]

Огромное спасибо!

[@WebArchitector]

Пожалуйста, но лучше возьмите svgr react-svgr.com/ Более современное решение :)

[@yanasperanskaya256]

Работает! Наконец !!!! Большое спасибо!

[@unknown.6914]

а через sprite пробовал? после билда на вите путь не находит. Как делаешь ты конечно работает, но хотелось бы увидеть более лаконичное решение

[@WebArchitector]

Попробуйте svgr:)

[@unknown.6914]

@@WebArchitector Спасибо за совет, попробую обязательно

[@МарияЗахарова-ы8ц]

Потрясающе 😍

[@masha18able1]

спасибо большое, очень помог мне, я затрахался с этими свг знатно, а потом за 4 минуты твоего видоса сделал че надо было

[@WebArchitector]

Спасибо, Рад слышать ))

[@АсанТурдукулов-и9б]

Спасибо за урок!

[@sergeyvladimirov9994]

Да, чувак, помогло. Спасибо большое!!

[@WebArchitector]

Пожалуйста)

[@romanriezanov1704]

Спасибо тебе!

[@vladimirt8871]

Спасибо) крутая реализация) сделал так же)

[@АртемТитов-з4о]

как реализовать на jsx?

[@Оля-м2ь5ф]

Супер круто, очень помогло!!

[@oleksandrvoronov4495]

Интересно , но опчему то у меня не получается. Я делаю без Тайпскрипта но ведь это ж не имеет значения. Просто что то я не могу уловить , какая то мелочь которая у меня не срабатывает. И я не делаю Свитч - Кейс , пока хотя бы один SVG подключить было бы победой, а там дальше уже пропсами буду передавать

[@WebArchitector]

А что именно не получается? Можете расписать?

[@vladyslavkhrushchov9454]

Классный ролик, спасибо. Но может вы знаете Как вызвать svg через обьект который находится в массиве ? вот я столкнулся с проблемой, что у меня есть несколько практически одинаковых элементов, но с разными svg и тестом. Я хочу с помощью метода map это всё перегнать. Текст с заголовком отрисовывается, а вот сама картинка нет. Пример массива: export const arraySvg = [ {svg: , text: headerText, } ] Возможно я неправильно его записываю в сам объект, но много способов перепробовал, и ничего не помогает

[@IlfatGaniev]

У меня есть файл "Header.component.js" туда мне нужно импортировать svg файл "logo.svg". То что вы показали подходит только для "tsx" файлов или для ".js" тоже подходит?

[@WebArchitector]

Привет, для js или jsx? Для jsx да, для js нет, если вы не используете создание реакт компонентов через createElement

[@f-len]

Спасибо, очень понятно👍

[@Оля-ы7к]

Классно объясняешь)

[@YaroslavChuiko]

кто-то пробовал svgr, или у него есть какие-то недостатки, которые я возможно еще не заметил?

[@sevwolve757]

Чёт велосипед какой-то, что мешает просто импортировать svg напрямую? import { ReactComponent as Icon } from './icon.svg'; Стили прекрасно передаются, главное убрать fill из самой иконки. Причём хоть через таблицу стилей, хоть через атрибут можно:

[@ТатьянаВитер-х3ф]

Что за дичь? Создавать почти одинаковые компоненты + одинаковые стили. Дублирование кода - это не хорошо. Кроме того, что если у нас не 4 иконки а 100500? В свитче каждую прописывать?

[@WebArchitector]

Расскажите, как вы организовываете в с своих реакт проектах работу с svg? О каких стилях идет речь? В видео говорится только о тех иконках, которым нужно менять цвет, либо задавать hover, остальные нет смысла добавлять в селекторы, они остаются обычными файлами. Может у вас в проекте 100500 ховеров на svg икноках..Тогда могу только посочувствовать.

[@YaroslavChuiko]

@@WebArchitector можно использовать svgr