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.
Raw svg icon,
After running SVGR, we get the below react component,
How to use SVGR?
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 is useful only if we have few icons for transformation. But with SVGR cli we can transform a single file or a whole directory.
@svgr/clilocally 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-diroption. 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.
- Write new script into
svgr.config.jsfile on root lever with below config,
- Now we are good to execute below npm command to transform all our svg icons into react components.
npm run icon:create
- Check Hybrowlabs for React app development services.
Top comments (0)