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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Шикарно))

Спасибо!

Спасибо!!!

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

@mishanep

2 жыл бұрын

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

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

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

@true227

4 ай бұрын

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

Лучший

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

красава

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

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

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

@mishanep

2 жыл бұрын

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

Лайк

👍👍👍

👍👍👍👍

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

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

Здравствуйте! Как интересно такие стили применить в 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; }

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

@mishanep

Жыл бұрын

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

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

@mishanep

2 жыл бұрын

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

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

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

@mishanep

2 жыл бұрын

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

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

@mishanep

2 жыл бұрын

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

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

@elenam4363

17 күн бұрын

Спасибо!

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

@mishanep

2 жыл бұрын

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

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

@mishanep

3 ай бұрын

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

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

@mishanep

2 жыл бұрын

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

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

4 ай бұрын

@@joyful_hunter vite-plugin-svgr

У меня не работает вот ошибка "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 надо читать доку как добиться того же самого. С ходу не отвечу.

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

@mishanep

2 жыл бұрын

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

@romanmed9035

2 жыл бұрын

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

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

@mishanep

2 жыл бұрын

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

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

@nikitaermolenko7813

Жыл бұрын

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

@mishanep

Жыл бұрын

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

@nikitaermolenko7813

Жыл бұрын

@@mishanep жеееесть

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

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

@mishanep

Жыл бұрын

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

@Surov000

Жыл бұрын

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

@mishanep

Жыл бұрын

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

Спасибо!