SVGR for your React app

SVGR for your React app

Most of the time, developers tend to add svg images to an assets directory and import them either directly or as a React component. This process not only increases your app bundle size but also makes managing all the assets difficult.
What if there was a way to manage all the application icons like the way we import them from any other icon library?
Yes, react-svgr helps you manage all the icons in your React application.

What is SVGR?

SVGR is an universal tool to transform SVG into React components.
SVGR takes a raw SVG and transforms it into a ready-to-use React component.

Example,
Raw svg icon,

Raw svg icon

After running SVGR, we get the below react component,

SVGR transformed react component

How to use SVGR?

1. SVGR playground
   SVGR playground will help us transform our svg image into a react component online. Then we can copy-paste this component into our react application for further use.

SVGR playground

2. SVGR cli
SVGR playground is useful only if we have few icons for transformation. But with SVGR cli we can transform a single file or a whole directory.

can install@svgr/cli locally in our project:

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

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

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

• Transform a whole directory Transforms a whole directory using --out-dir option. All SVG presents in this directory tree are transformed into React components.

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

Write a script for batch transformation

With the help of @svgr/cli we can simple write a script which can further simply this process.

1. Write new script into package.json,

SVGR script

2. Create svgr.config.js file on root lever with below config,

svgr.config.js

3. Now we are good to execute below npm command to transform all our svg icons into react components.

npm run icon:create

Originally published at https://dev.to on March 12, 2023.