SVG Components in React

#SVG is great as you get to scale it without loss of quality. In this lesson we look at various ways you can use SVG in #React and then we also look at #SVGR to automate the creation of components for us. We are using #TypeScript but this will work with #JavaScript as well 🌹

This lesson was requested in the comments. If you have a lesson request, leave it below ❤️

#basarat #svg #react #tutorial

In this lesson
0:00 Intro
0:12 Export SVG
0:22 Built in Support
1:14 Create Components
2:32 Automating Component Creation
3:40 Use SVG as Font
4:40 Outro

👇 SUBSCRIBE for MORE 👇

**Feel Free To Read This Lot**

I'm Basarat, That TypeScript Guy and I love helping developers. More about me:

Microsoft MVP for TypeScript
Lead Frontend Practice at Australia Post
150K contributions on Stackoverflow. Top Contributor for TypeScript.
Book Author : Beginning NodeJS
Book Author : TypeScript Deep Dive
Creator of multiple hot ✨ed Github Open Source projects

[rakshitlakhatariya]

What a tutorial man! so easy explanation, Subscribed 👍

[leofoster]

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

[en_kratia]

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

[totiruiz]

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

[atalyy]

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

[烟幕-ie]

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

[jeevandza]

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

[alejandrolopez]

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

[pronatalia]

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?

[Norfeldt]

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

[АндрейНосов-иу]

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

[fredericwatare-officiel]

Really clear and helpful.

Everything worked on my side

Thank you my friend.

[thiagolinhares]

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

[kyle]

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';

<IconName />

[tarunsikarwar]

please make a vedio on nextjs and typescript project

[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)