Отличное видео, полезное. Я, признаться честно, даже не догадывался о том, что возможность работы с svg доступна из коробки - даже мысли загуглить не было. Я поступал так: создавал HOC, который добавляет возможность задавать для svg проп size и проп style. Также задавал отдельные пропы для цвета, толщины обводки, если такое было нужно. Обязательно исправлю теперь этот костыль в своем учебном проекте!
если у вас сборщик Vite, то для свг устанавливаете плагин vite-plugin-svgr , описание по подключению на его странице. В конце строке пути импорта файла свг не забудьте указать ?react , импортируете без ReactComponent, а просто пишете нужное имя элемента. И еще у меня почему-то пропал импорт самого реакта в App.js, его в этом случае добавьте и все заработает
Подход очень крутой. Но возникает вопрос: а что делать если иконка передается динамически, у одной может быть fill, а у другой stroke, и указание цвета для fill приводит к заполнению вовсе не там где хочется?
Миша, спасибо большое 🙏🏻 очень полезно. Как раз недавно была такая необходимость покрасить svg в другой цвет. Пытался через css это сделать, но ничего не вышло.
Спасибо за видео, а есть ли подобный способ, если иконка svg добавляется не через JSX, а бэкграундом для ::before у соответствующего элемента? На hover элемента мне нужно менять цвет иконки, сейчас в проекте это реализовано так, что просто подгружается другая иконка с другим цветом, работает это долго и в первый раз в момент наведения она как бы "мигает", так как другая иконка не успевает подгрузиться. Хотелось бы какое-то нормальное решение по смене цвета через css :(
Зависит от настроек сборки проекта. В видео используется утилита create-react-app где данный функционал идёт из коробки. Как настроить для vite или rsbuild - у меня есть шортс на канале об этом
Разве это реакт все делает? По моему это работает только в create-react-app, так-как там в конфиге вебпака есть плагин svgr, который и позволяет импортировать так иконки. Или я ошибаюсь?
У меня не работает вот ошибка "Uncaught SyntaxError: The requested module '/public/svg/air_qualitu.svg?import' does not provide an export named 'ReactComponent"
@@smidvard понятно. Пример был из сборщика create-react-app, где под капотом реализуется такая штука для svg. Для vite надо читать доку как добиться того же самого. С ходу не отвечу.
Спасибо большое! полезное видео, стало понятно, что же такое current этот) Подскажи пожалуйста - в create react app с свг все ок по дефолту, а когда ты сам конфиг пишешь для вебпака с нуля, что необходимо сделать, чтобы поведение было таким же для свг иконок?) указать путь к папке с ними (например src/assets) и указать лоудер типо @svgr/webpack для расширения svg? Мне кажется я понимаю, но хочу для себя прояснить по пунктам - например при настройке конфига в вебпаке для работы с свг мы должны - 1 пункт, 2 пункт и 3 пункт.... Буду как всегда очень благодарен, если пояснишь) Спасибо!
Большое спасибо за видео! Очень полезно! Если правильно пониманию, то этот способ позволяет закрасить свг только одним цветом. А если внутри несколько филов, как им передавать нужные значения?
Я скачал макет для теста и в нём Header имел 100vh и тут я столкнулся с тем сто css не работает так как App является вложенным в структуре DOM есть ли какие-то решения чтоб меньше дебажить верстку? Обычно этот ефект привязан к Body. Считаю что это связано с тем что здесь сталкиваются два DOMa один статичный другой виртуальный (APP React Component)
Здравствуйте. В реакт приложении нет никаких ограничений на использование vh. Тот же хэдер спокойно можно растянуть на экран и наличие корневого элемента (промежуточного относительно body) здесь не является помехой.
В Реакте после сборки оно кодом и вставляется. Есть разные способы добавления svg на страницу, но не все позволяют стилизовать элемент. Если просто верстаете, то да, кодом вставлять =)
а слабо видос не про 2+2 записать, а анимировать хотябы трехцветную svg с эффектами на разных элементах? Капитанская инфа есть везде, в чем смысл ее заливать
на таких людях держится мир, спасибо
Отличное видео, полезное. Я, признаться честно, даже не догадывался о том, что возможность работы с svg доступна из коробки - даже мысли загуглить не было. Я поступал так: создавал HOC, который добавляет возможность задавать для svg проп size и проп style. Также задавал отдельные пропы для цвета, толщины обводки, если такое было нужно. Обязательно исправлю теперь этот костыль в своем учебном проекте!
Ваш канал очень полезен для меня и всех начинающих на React, спасибо большое за полезную информацию и отличную подачу контента!
Первый раз попал на Ваш канал, через это видео. А тут же кладезь всего) спасибо вам за работу!
Почему я не нашел это видео час назад? Мужик, ты просто лучший.
ролик выручил меня! спасибо!
Лучшее решение! До этого я столкнулся с такой проблемой и все что нагуглил это css filter для ховера, либо скопипастить svg иконки изменив цвет
Я встречал оба варианта в продакшн коде)))
Огромное спасибо!!! Это очень полезно!!! много ломал голову над этим вопросом! +в карму)))
Спасибо и не останавливайся. Очень интересный и полезный контент.
как всегда, все легко понимается), спасиб
спасибо большое. очень полезная вещь
Безумно полезное видео, спасибо большое!)
Спасибо, помогло очень при разработке моего приложения!
Ты супер! Обожаю! Я наверное уже час ищу как сделать правильно)))
Отличный видос! Спасибо большое. Я правильно понял, что это альтернатива react-icons/font-awsome?
Спасибо большое за полезный контент!
Супер. Огромное спасибо!
Отличное видео, спасибо, как раз на учебном проекте пригодится! :)
спасибо за хорошее видео) узнал что то интересное
Спасибо огромное. Очень в тему. Идеальное решение. Единственно, раз уж дело касается Реакта, то можно было ещё пример с map-функцией.
что за мап функция? Просто метод массива map?
если у вас сборщик Vite, то для свг устанавливаете плагин vite-plugin-svgr , описание по подключению на его странице. В конце строке пути импорта файла свг не забудьте указать ?react , импортируете без ReactComponent, а просто пишете нужное имя элемента. И еще у меня почему-то пропал импорт самого реакта в App.js, его в этом случае добавьте и все заработает
Спасибо!
круто круто круто, колокольчик помог не пропустить))
спасибо, очень выручили
Спасибо! Очень полезно
Подход очень крутой. Но возникает вопрос: а что делать если иконка передается динамически, у одной может быть fill, а у другой stroke, и указание цвета для fill приводит к заполнению вовсе не там где хочется?
Михаил. Спасибо огромное. Очень полезное видео. А то я раньше мучился с создание svg иконок другого цвета и заменой их в DOM по условию на hover…
Спасибо большое!
Шикарно))
Миша, спасибо большое 🙏🏻 очень полезно. Как раз недавно была такая необходимость покрасить svg в другой цвет. Пытался через css это сделать, но ничего не вышло.
Спасибо за видео, а есть ли подобный способ, если иконка svg добавляется не через JSX, а бэкграундом для ::before у соответствующего элемента? На hover элемента мне нужно менять цвет иконки, сейчас в проекте это реализовано так, что просто подгружается другая иконка с другим цветом, работает это долго и в первый раз в момент наведения она как бы "мигает", так как другая иконка не успевает подгрузиться. Хотелось бы какое-то нормальное решение по смене цвета через css :(
Лучший
Спасибо видео помогло. Мне как раз надо покрасить иконки для соц сетей. Долго ломал голову, почему не работает свойство fill.
Здравствуйте! Как интересно такие стили применить в 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;
}
Module '"*.svg"' has no exported member 'ReactComponent'. Did you mean to use 'import ReactComponent from "*.svg"' instead?ts(2614)
Типизацию просит :) здесь надо смотреть что вы для сборки использовать и читать соответствующую документацию
@@mishanep Спасибо большое. Решил. Для vite отдельный плагин отказывается был.
@@arslan5919 Подскажите, пожалуйста, какой?
@@joyful_hunter vite-plugin-svgr
ничего не понятно, но очень интересно. Как повторить это все в домашних условиях?
Зависит от настроек сборки проекта. В видео используется утилита create-react-app где данный функционал идёт из коробки. Как настроить для vite или rsbuild - у меня есть шортс на канале об этом
Спасибо!!!
Разве это реакт все делает? По моему это работает только в create-react-app, так-как там в конфиге вебпака есть плагин svgr, который и позволяет импортировать так иконки. Или я ошибаюсь?
Скорее всего вы правы.
Вовремя, прям как мана небесная)
А как тоже свмое сделать в Typescript?)
У меня не работает вот ошибка "Uncaught SyntaxError: The requested module '/public/svg/air_qualitu.svg?import' does not provide an export named 'ReactComponent"
Если проект на TypeScript, то скорее всего типы для svg ничего не знают о ReactComponent.
@@mishanepНе на js
@@smidvard а собираете чем?
@@mishanep vite
@@smidvard понятно. Пример был из сборщика create-react-app, где под капотом реализуется такая штука для svg. Для vite надо читать доку как добиться того же самого. С ходу не отвечу.
Вот бы проэктик какой ни будь посмотреть. React + Redux + NodeJS)))
Спасибо большое! полезное видео, стало понятно, что же такое current этот)
Подскажи пожалуйста - в create react app с свг все ок по дефолту, а когда ты сам конфиг пишешь для вебпака с нуля, что необходимо сделать, чтобы поведение было таким же для свг иконок?) указать путь к папке с ними (например src/assets) и указать лоудер типо @svgr/webpack для расширения svg? Мне кажется я понимаю, но хочу для себя прояснить по пунктам - например при настройке конфига в вебпаке для работы с свг мы должны - 1 пункт, 2 пункт и 3 пункт....
Буду как всегда очень благодарен, если пояснишь) Спасибо!
Скорее всего да, вручную нужно добавлять тогда преобразования. Как именно не подскажу, не реализовывал.
как вы считаете ,что лучше использовать styledcomponents или css modules / для новичка ?
Для новичка однозначно модулей будет достаточно
Большое спасибо за видео! Очень полезно!
Если правильно пониманию, то этот способ позволяет закрасить свг только одним цветом. А если внутри несколько филов, как им передавать нужные значения?
Через css можно попробовать псевдоселектор :nth-child
Их можно еще оборачивать в функции и экспортировать, а импортировать как обычный компонент.
Безусловно. Так обычно и выглядят современные библиотеки с готовыми svg иконками.
Привет Михаил! Можешь сделать видео работой с svg-sprites в REACT
Приветствую! Никогда не работал с svg-sprites =) Если доведется, то и про видео можно будет подумать.
Я скачал макет для теста и в нём Header имел 100vh и тут я столкнулся с тем сто css не работает так как App является вложенным в структуре DOM есть ли какие-то решения чтоб меньше дебажить верстку? Обычно этот ефект привязан к Body. Считаю что это связано с тем что здесь сталкиваются два DOMa один статичный другой виртуальный (APP React Component)
Здравствуйте.
В реакт приложении нет никаких ограничений на использование vh. Тот же хэдер спокойно можно растянуть на экран и наличие корневого элемента (промежуточного относительно body) здесь не является помехой.
красава
неожиданное решение. а есть ли видео для начинающих в реакт? чтобы совсем кто даже и терминала в руках не держал?
@Roman Med есть целый курс по Реакт для начинающих. Ссылки на курсы есть в описании под каждым видео.
@@mishanep спасибо. ибо в чатах надо начинающих куда-то направлять где будет полезно. ибо уже нет терпения простейшее описывать.
👍👍👍👍
А как без react красить свг?:)
Неужели кодом вставлять
В Реакте после сборки оно кодом и вставляется. Есть разные способы добавления svg на страницу, но не все позволяют стилизовать элемент. Если просто верстаете, то да, кодом вставлять =)
@@mishanep жеееесть
Лайк
Полезное видео. ' * ' что это означает
Универсальный селектор. Что угодно.
тот случай когда ты новоичек и просто посмотрел 5 мин видео и не чего не понял xD
а слабо видос не про 2+2 записать, а анимировать хотябы трехцветную svg с эффектами на разных элементах? Капитанская инфа есть везде, в чем смысл ее заливать
Если вы почитаете соседние комментарии, то смысл делать подобные видео станет очевидным.
@@mishanep без негатива, хочется поднять скил в обращении с свг, но хардовых гайдов не могу найти.
@@Surov000 попробуйте FrontendMasters frontendmasters.com/courses/?q=svg
спасибо!
очень полезно
Спасибо!
👍👍👍
Спасибо! Очень полезно
Спасибо!