DEV Community

Cover image for SVGR for your React app
Rishikesh Vedpathak
Rishikesh Vedpathak

Posted on

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


Enter fullscreen mode Exit fullscreen mode
  • Transforms a single file by specifying file as the single argument.


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


Enter fullscreen mode Exit fullscreen mode
  • 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

Enter fullscreen mode Exit fullscreen mode




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 cli script
  2. Create svgr.config.js file on root lever with below config, svgr config
  3. Now we are good to execute below npm command to transform all our svg icons into react components.


npm run icon:create

Enter fullscreen mode Exit fullscreen mode




And more...

  • Check Hybrowlabs for React app development services.

Top comments (0)