SVG to react component examples
If you use SVGs, you may want to easily convert those as React components so that they're easier to work with (custom props, dynamic colors/size, etc.).
That's what we did with the country flags:
It'd be very easy to update those components to add some additional capabilities, such as resizing them through props, because they're React components.
Usually, our designer make SVGs on their own, and then they send them to us developers, and we have to integrate them within our app.
That can be tricky and a tiresome process. We use the awesome SVGR library, which basically converts our SVG into React components.
1
yarn svgRunning this script will convert all
Only SVGs are git tracked within this folder, because the generated React components are supposed to be temporary there.
They're meant to be copied/moved into the
Personally, we like to move them to
.svg files in the src/svg folder.Only SVGs are git tracked within this folder, because the generated React components are supposed to be temporary there.
They're meant to be copied/moved into the
src/components folder once they'eve been generated, and to be used/customised from there.Personally, we like to move them to
src/components/svg, but feel free to do as you like.