SVG Components in React

[@rakshitlakhatariya137]

What a tutorial man! so easy explanation, Subscribed 👍

[@fredericwatare-officiel1503]

Really clear and helpful. Everything worked on my side Thank you my friend.

[@victorveton6066]

Simple and informative. thank you!

[@totiruiz5913]

Thank you for the help. Easy explanation with powerful results!

[@atalyy]

ur voice makes my soul calm af, and btw thanks for the tutorial

[@julianbelmarsh]

Excellent tutorial, thanks! :)

[@christophbaumann9626]

Hello Basarat, awesome video! I´m wondering how to make an on hover effect on these svg´s, since adding a hover effect on them in css doesn´t seem to work for me. Is there any solution to this? Thank you very much!

[@quaidbergo]

Super explanation, thanks!

[@daiaanebarbosaf]

Thank you!

[@simonmunka1958]

helpful, thanks !

[@Phyx1u5]

awesome info thanks!

[@javid1326]

Great!

[@anand_maurya]

Thank you this was very helpful. I would like to know how to dynamically change "fill" property of multiple svg elements (eg. change the "fill" property of multiple circle elements in a SVG image)

[@Darkdreamsxf]

Thank you ~

[@voldemortvi4264]

Dude Thank you so much

[@ol1175]

Awesome!!!!

[@thiagolinhares8546]

how can i use the @svgr with yarn? running the same command with 'yarn add' returned a error Command failed

[@jeevandza3464]

How to make it dynamic like where we can select edit, add and add elements to SVG ?

[@Musafir106]

Awesome. I'm now a fan of you.

[@leofoster9754]

Thank youuu sooo much mann, you saved a lot of time

[@basarat]

Glad it was useful 🥂

[@gonzaotc]

Thankss!

[@Norfeldt]

Fantastic 👌 like how you showed the different ways to do it.

[@mashahansdahhansdah3604]

909

[@Onesmo]

thank you so much

[@abhishekbhat4618]

Thank you bro

[@orestprystayko9284]

Everything in one place. Awesome job!

[@renu3463]

Quality content.

[@alejandrolopez9378]

Great explanation my friend, thank you very much for sharing.

[@basarat]

Thanks

[@martintreeman6531]

Very useful video.

[@krackytech2344]

thanks!

[@mayorwe]

My man you are the BEAST!

[@basarat]

Thank you 🙏🏻 🌹

[@user-dl6tn3pi5g]

hi basarat, may i ask about how to use the this tag in reactjs and modify the svg size

[@ramamadhavanagireddy9346]

Thanks bro

[@chamaldezilva]

amazing explain!!! just hit the subscribe button!!!

[@andressuarez1]

x2

[@en_kratia]

How you can be so smart about everything? Thank you very much

[@viniciusm.m.7822]

THANKS!

[@basarat]

Appreciate you leaving a comment

[@jesselopez2173]

thanks

[@nitinupadhyay9193]

brilliant

[@hishamhassoun5224]

good explain

[@pronatalia313]

that’s a delightful explanation, thanks you. I have a question, is it possible to make the imported svg icon clickable just like we add onClick event?

[@basarat]

Yup. onClick works fine 🌹

[@mohamedyoussef8835]

Awesome video ++++++++++++++++++++ Thank You

[@basarat]

Thanks mate ❤️🌹

[@felipeoliveira5734]

thx!!!

[@basarat]

Cheers 🥂

[@ricardofernandez8154]

10/10

[@djoni1]

Where do I place the alt tag?

[@serhiibylynka7856]

You can add a 'title' tag to svg. It works as 'alt' attribute for img. Here is a sample codepen.io/hmig/pen/adQoOJ

[@mohamedaje5417]

does anyone know how to make svg clickable?

[@ukaszbielecki2003]

Put svg icon inside button tags and set the style background: transparent; and border: none; on the button

[@leo_leo814]

Wonderful

[@basarat]

Thanks 🙏🏻 A lot of work went into planning this video 🫶🏻🌹

[@leo_leo814]

I am working on a challenge from frontend mentor, it needs to change color of svg when hover it. I search for methods on KZbin, and I think that your solution is the most best, it can use the svg as the same as text, very convinent and clever@@basarat

[@fuckthereijkee]

[@tarunsikarwar]

please make a vedio on nextjs and typescript project

[@basarat]

Thanks for the comment! Already done : kzbin.info/www/bejne/gXaZo4CBd5iMac0 🌹

[@kyle7382]

you can also just do the following without needing to make a react component for every icon you want: import { ReactComponent as IconName } from '../path/img/icon.svg';

[@felipepereira1967]

Your son of a bit***, you just save my job!!!

[@Gelliny]

This is very helpful but I can't change the color with that

[@felipepereira1967]

@@Gelliny Você já tentou usar os atributos "color" ou "fill" passando a cor como argumento?

[@Gelliny]

@@felipepereira1967 eu tentei color e fill e não consegui. Eu fiz do jeito que ele mostrou no vídeo aqui e só consegui mudar a cor fazendo um componente novo e mudando a prop fill pra currentColor.

[@felipepereira1967]

@@Gelliny Eita gambiarra boa! Kkkk Bom, pelo menos conseguiu resolver seu problema!

[@user-ol1dl9qu9f]

Command "npx @svgr/cli" is a life saver! Thank you man🙏