SVGR for your React app

More often than not, builders have a tendency so as to add svg pictures to an belongings listing and import them both instantly or as a React element. This course of not solely will increase your app bundle dimension but additionally makes managing all of the belongings tough.
What if there was a approach to handle all the applying icons like the best way we import them from another icon library?
Sure, react-svgr helps you handle all of the icons in your React utility.

What’s SVGR?

SVGR is an common instrument to remodel SVG into React elements.
SVGR takes a uncooked SVG and transforms it right into a ready-to-use React element.

Instance,
Uncooked svg icon,

After working SVGR, we get the under react element,

The best way to use SVGR?

1. SVGR playground
   SVGR playground will assist us rework our svg picture right into a react element on-line. Then we will copy-paste this element into our react utility for additional use.
   

2. SVGR cli
   SVGR playground is helpful provided that we’ve few icons for transformation. However with SVGR cli we will rework a single file or an entire listing.
   can set up @svgr/cli regionally in our venture:

npm set up --save-dev @svgr/cli
# or use yarn
yarn add --dev @svgr/cli

• Transforms a single file by specifying file as the only argument.

npx @svgr/cli -- belongings/icons/menu-icon.svg

• Remodel an entire listing
  Transforms an entire listing utilizing --out-dir choice. All SVG presents on this listing tree are remodeled into React elements.

npx @svgr/cli --out-dir dist -- icons

Write a script for batch transformation

With the assistance of @svgr/cli we will easy write a script which may additional merely this course of.

1. Write new script into bundle.json,
   
2. Create svgr.config.js file on root lever with under config,
   
3. Now we’re good to execute under npm command to remodel all our svg icons into react elements.

npm run icon:create

And extra…

• Test Hybrowlabs for React app improvement companies.