Working with SVG in React and different ways of styling it

[@himanshulal97]

whoo tha exactly what i want to do with my svgs thanks a lot broo god bless you. hare krishana !

[@thedevlpr684]

You're welcome bro

[@Mufees_mhd]

i have 4 logos like these so i did this last method now i need to call this 4 times with in a card. so it's make some kind a code repeat and ugly. i wonder am i able to call these components like array maping?

[@jotasenator]

great! I had a todo ..and it s about to change values inside SVG that I have rendered in my site..like variable's values that I obtain from other components ...what do you think about it?

[@afrikanking4022]

I have a problem which I want to solve with svg. want a map of a country with all states and provinces. but I need these states to have either one of 3 states. One grey, light blue and dark blue based on voter numbers. I also want them to be clickable so that they can open another component

[@tootyrnt5533]

Is there any way I can create a reusable component to handle multiple SVGs? I have like 6 logos and it'd be a lot easier if i can use one component and just pass down the props.

[@thedevlpr684]

That's doable for sure you just wrote the steps to create it 😅

[@rubenverster250]

You'll have to basically create a higher order component that manages svgs XP

[@raba650]

This is great, but what about packaged svg icons like react-icons where you don’t have access to the individual svg file for its React component?

[@thedevlpr684]

Not sure as I haven't worked with react icons but id say they probably accept props to change the SVG look and feel

[@awabelmahe9700]

Thank you for the very helpful video. I didn't occur to me to convert the svg to a react component.

[@thedevlpr684]

You are welcome

[@zen123w]

Great video and explanation!

[@manshihudda763]

Hi , how to use JSON of 100 svg logo and edit in react, because i want to render 100 svg logo in my project and want to edit icon and text of svg logo

[@prathmeshkalehere]

where did that came from?????

[@JosephSackey597]

It is self generated when you create an svg file.

[@dylannoel1996]

g is like a div but for SVG

[@ofir77]

Great video thanks!!

[@thedevlpr684]

You're welcome 😉

[@shaileshrkumar6813]

how to add svg in background ? is it possible

[@himanshulal97]

yes bro it is possible simply add background: url(relative path of that svg)

[@rubenverster250]

background-image: url(REL_SVG_PATH); background-repeat: no-repeat;

[@arturhonores9141]

muchas gracias por el video, me ha sido muy útil.

[@lautarocorva6994]

Good explanation bro

[@TheTonyMan]

thanks

[@JustAleks42]

thanks)

[@danieloyeleye3257]

My svg is not rendering anything, it's fucking BLANK, I imported it just like u did, had the same className and React could definitely find the damn file

[@youtubegarbage4u]

imagine you have like 50 svg images...so you have components for each of all 50 images???

[@thedevlpr684]

No you can pass the image SVG as a child maybe..play around with it ;)

[@rubenverster250]

HOC

[@asnaos5187]

You can use SVGR, because it allow import svg how ReactComponent and you can use svg as a component, like the one shown in the video