Как поменять цвет SVG в React-приложении

[@ArseniyBendyukov]

Отличное видео, полезное. Я, признаться честно, даже не догадывался о том, что возможность работы с svg доступна из коробки - даже мысли загуглить не было. Я поступал так: создавал HOC, который добавляет возможность задавать для svg проп size и проп style. Также задавал отдельные пропы для цвета, толщины обводки, если такое было нужно. Обязательно исправлю теперь этот костыль в своем учебном проекте!

[@sweatdreams2200]

Первый раз попал на Ваш канал, через это видео. А тут же кладезь всего) спасибо вам за работу!

[@azamumarov182]

Ваш канал очень полезен для меня и всех начинающих на React, спасибо большое за полезную информацию и отличную подачу контента!

[@evgeny9945]

на таких людях держится мир, спасибо

[@ТимурМоисеев-н8ь]

Почему я не нашел это видео час назад? Мужик, ты просто лучший.

[@АрчибальтГугенов]

ролик выручил меня! спасибо!

[@Елена-б6в3ж]

Спасибо! Очень полезно

[@VasiliyAlexsandrovich]

спасибо большое. очень полезная вещь

[@koshgosh3081]

как всегда, все легко понимается), спасиб

[@kyryloovsiannik7207]

Спасибо и не останавливайся. Очень интересный и полезный контент.

[@Дима-п7х6л]

Огромное спасибо!!! Это очень полезно!!! много ломал голову над этим вопросом! +в карму)))

[@ЕленаДавыдик-м4я]

Безумно полезное видео, спасибо большое!)

[@ТриоЛяро]

Лучшее решение! До этого я столкнулся с такой проблемой и все что нагуглил это css filter для ховера, либо скопипастить svg иконки изменив цвет

[@mishanep]

Я встречал оба варианта в продакшн коде)))

[@Nuts_Cracker]

Спасибо большое за полезный контент!

[@CmapnepTV]

Спасибо, помогло очень при разработке моего приложения!

[@user-artem-busyhin]

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

[@prandrey2153]

Ты супер! Обожаю! Я наверное уже час ищу как сделать правильно)))

[@ahmadumarov2845]

спасибо за хорошее видео) узнал что то интересное

[@newageteam]

спасибо, очень выручили

[@NovikovEugene84]

Спасибо огромное. Очень в тему. Идеальное решение. Единственно, раз уж дело касается Реакта, то можно было ещё пример с map-функцией.

[@true227]

что за мап функция? Просто метод массива map?

[@yeppiee939]

Отличное видео, спасибо, как раз на учебном проекте пригодится! :)

[@СергейКузнецов-э4я2я]

Отличный видос! Спасибо большое. Я правильно понял, что это альтернатива react-icons/font-awsome?

[@happy_cutman]

Шикарно))

[@detlolkarus2461]

Спасибо большое!

[@ЕвгенийШут-о7н]

круто круто круто, колокольчик помог не пропустить))

[@АлексейСтепанов-к9о]

Михаил. Спасибо огромное. Очень полезное видео. А то я раньше мучился с создание svg иконок другого цвета и заменой их в DOM по условию на hover…

[@Iepka_Roblox]

Спасибо!

[@tirthadeva_yoga]

Миша, спасибо большое 🙏🏻 очень полезно. Как раз недавно была такая необходимость покрасить svg в другой цвет. Пытался через css это сделать, но ничего не вышло.

[@rostikalekseev]

Лучший

[@alexandervinnik2726]

Подход очень крутой. Но возникает вопрос: а что делать если иконка передается динамически, у одной может быть fill, а у другой stroke, и указание цвета для fill приводит к заполнению вовсе не там где хочется?

[@leram3198]

Спасибо за видео, а есть ли подобный способ, если иконка svg добавляется не через JSX, а бэкграундом для ::before у соответствующего элемента? На hover элемента мне нужно менять цвет иконки, сейчас в проекте это реализовано так, что просто подгружается другая иконка с другим цветом, работает это долго и в первый раз в момент наведения она как бы "мигает", так как другая иконка не успевает подгрузиться. Хотелось бы какое-то нормальное решение по смене цвета через css :(

[@true227]

если у вас сборщик Vite, то для свг устанавливаете плагин vite-plugin-svgr , описание по подключению на его странице. В конце строке пути импорта файла свг не забудьте указать ?react , импортируете без ReactComponent, а просто пишете нужное имя элемента. И еще у меня почему-то пропал импорт самого реакта в App.js, его в этом случае добавьте и все заработает

[@elenam4363]

Спасибо!

[@kirillkhvorikov9470]

Вот бы проэктик какой ни будь посмотреть. React + Redux + NodeJS)))

[@stern2936]

Вовремя, прям как мана небесная)

[@arslan5919]

Module '"*.svg"' has no exported member 'ReactComponent'. Did you mean to use 'import ReactComponent from "*.svg"' instead?ts(2614)

[@mishanep]

Типизацию просит :) здесь надо смотреть что вы для сборки использовать и читать соответствующую документацию

[@arslan5919]

@@mishanep Спасибо большое. Решил. Для vite отдельный плагин отказывается был.

[@joyful_hunter]

@@arslan5919 Подскажите, пожалуйста, какой?

[@true227]

@@joyful_hunter vite-plugin-svgr

[@pw8749]

Спасибо видео помогло. Мне как раз надо покрасить иконки для соц сетей. Долго ломал голову, почему не работает свойство fill.

[@dimama1551]

красава

[@velikorossnationalist4259]

Здравствуйте! Как интересно такие стили применить в Chakra UI? svg { color: green; cursor: auto; } svg:has(rect:hover) { color: red; cursor: pointer; } svg path { opacity: 0; transition: .6s; } svg:has(rect:hover) path { opacity: 1; }

[@MrHackzack]

ничего не понятно, но очень интересно. Как повторить это все в домашних условиях?

[@mishanep]

Зависит от настроек сборки проекта. В видео используется утилита create-react-app где данный функционал идёт из коробки. Как настроить для vite или rsbuild - у меня есть шортс на канале об этом

[@РоманБогдан-з6ц]

👍👍👍

[@izzy7541]

Разве это реакт все делает? По моему это работает только в create-react-app, так-как там в конфиге вебпака есть плагин svgr, который и позволяет импортировать так иконки. Или я ошибаюсь?

[@mishanep]

Скорее всего вы правы.

[@magerrrr]

Спасибо большое! полезное видео, стало понятно, что же такое current этот) Подскажи пожалуйста - в create react app с свг все ок по дефолту, а когда ты сам конфиг пишешь для вебпака с нуля, что необходимо сделать, чтобы поведение было таким же для свг иконок?) указать путь к папке с ними (например src/assets) и указать лоудер типо @svgr/webpack для расширения svg? Мне кажется я понимаю, но хочу для себя прояснить по пунктам - например при настройке конфига в вебпаке для работы с свг мы должны - 1 пункт, 2 пункт и 3 пункт.... Буду как всегда очень благодарен, если пояснишь) Спасибо!

[@mishanep]

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

[@smidvard]

У меня не работает вот ошибка "Uncaught SyntaxError: The requested module '/public/svg/air_qualitu.svg?import' does not provide an export named 'ReactComponent"

[@mishanep]

Если проект на TypeScript, то скорее всего типы для svg ничего не знают о ReactComponent.

[@smidvard]

@@mishanepНе на js

[@mishanep]

@@smidvard а собираете чем?

[@smidvard]

@@mishanep vite

[@mishanep]

@@smidvard понятно. Пример был из сборщика create-react-app, где под капотом реализуется такая штука для svg. Для vite надо читать доку как добиться того же самого. С ходу не отвечу.

[@sasdasaasdasdasdadad5354]

как вы считаете ,что лучше использовать styledcomponents или css modules / для новичка ?

[@mishanep]

Для новичка однозначно модулей будет достаточно

[@aleksprimetv]

Их можно еще оборачивать в функции и экспортировать, а импортировать как обычный компонент.

[@mishanep]

Безусловно. Так обычно и выглядят современные библиотеки с готовыми svg иконками.

[@ursidae9]

Большое спасибо за видео! Очень полезно! Если правильно пониманию, то этот способ позволяет закрасить свг только одним цветом. А если внутри несколько филов, как им передавать нужные значения?

[@mishanep]

Через css можно попробовать псевдоселектор :nth-child

[@from_brest2631]

Лайк

[@RD-or5go]

А как тоже свмое сделать в Typescript?)

[@paulsekishov4143]

Привет Михаил! Можешь сделать видео работой с svg-sprites в REACT

[@mishanep]

Приветствую! Никогда не работал с svg-sprites =) Если доведется, то и про видео можно будет подумать.

[@paulsekishov4143]

Я скачал макет для теста и в нём Header имел 100vh и тут я столкнулся с тем сто css не работает так как App является вложенным в структуре DOM есть ли какие-то решения чтоб меньше дебажить верстку? Обычно этот ефект привязан к Body. Считаю что это связано с тем что здесь сталкиваются два DOMa один статичный другой виртуальный (APP React Component)

[@mishanep]

Здравствуйте. В реакт приложении нет никаких ограничений на использование vh. Тот же хэдер спокойно можно растянуть на экран и наличие корневого элемента (промежуточного относительно body) здесь не является помехой.

[@romanmed9035]

неожиданное решение. а есть ли видео для начинающих в реакт? чтобы совсем кто даже и терминала в руках не держал?

[@mishanep]

@Roman Med есть целый курс по Реакт для начинающих. Ссылки на курсы есть в описании под каждым видео.

[@romanmed9035]

@@mishanep спасибо. ибо в чатах надо начинающих куда-то направлять где будет полезно. ибо уже нет терпения простейшее описывать.

[@romanstoleru7936]

тот случай когда ты новоичек и просто посмотрел 5 мин видео и не чего не понял xD

[@AmericanDragon134]

Полезное видео. ' * ' что это означает

[@mishanep]

Универсальный селектор. Что угодно.

[@nikitaermolenko7813]

А как без react красить свг?:)

[@nikitaermolenko7813]

Неужели кодом вставлять

[@mishanep]

В Реакте после сборки оно кодом и вставляется. Есть разные способы добавления svg на страницу, но не все позволяют стилизовать элемент. Если просто верстаете, то да, кодом вставлять =)

[@nikitaermolenko7813]

@@mishanep жеееесть

[@Surov000]

а слабо видос не про 2+2 записать, а анимировать хотябы трехцветную svg с эффектами на разных элементах? Капитанская инфа есть везде, в чем смысл ее заливать

[@mishanep]

Если вы почитаете соседние комментарии, то смысл делать подобные видео станет очевидным.

[@Surov000]

@@mishanep без негатива, хочется поднять скил в обращении с свг, но хардовых гайдов не могу найти.

[@mishanep]

@@Surov000 попробуйте FrontendMasters frontendmasters.com/courses/?q=svg

[@SergAlexson]

Спасибо! Очень полезно

[@unhandled_error]

Спасибо!

[@armankhoyetsyan4705]

👍👍👍👍

[@TigerUnderMoon]

спасибо! очень полезно

[@onlynowmotivation]

Спасибо!!!