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…


This content originally appeared on DEV Community and was authored by Rishikesh Vedpathak

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

And more...

  • Check Hybrowlabs for React app development services.


This content originally appeared on DEV Community and was authored by Rishikesh Vedpathak


Print Share Comment Cite Upload Translate Updates
APA

Rishikesh Vedpathak | Sciencx (2023-03-12T22:06:48+00:00) SVGR for your React app. Retrieved from https://www.scien.cx/2023/03/12/svgr-for-your-react-app/

MLA
" » SVGR for your React app." Rishikesh Vedpathak | Sciencx - Sunday March 12, 2023, https://www.scien.cx/2023/03/12/svgr-for-your-react-app/
HARVARD
Rishikesh Vedpathak | Sciencx Sunday March 12, 2023 » SVGR for your React app., viewed ,<https://www.scien.cx/2023/03/12/svgr-for-your-react-app/>
VANCOUVER
Rishikesh Vedpathak | Sciencx - » SVGR for your React app. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2023/03/12/svgr-for-your-react-app/
CHICAGO
" » SVGR for your React app." Rishikesh Vedpathak | Sciencx - Accessed . https://www.scien.cx/2023/03/12/svgr-for-your-react-app/
IEEE
" » SVGR for your React app." Rishikesh Vedpathak | Sciencx [Online]. Available: https://www.scien.cx/2023/03/12/svgr-for-your-react-app/. [Accessed: ]
rf:citation
» SVGR for your React app | Rishikesh Vedpathak | Sciencx | https://www.scien.cx/2023/03/12/svgr-for-your-react-app/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts