Transform SVG Icons to React Components -SVGR CLI

As modern web development evolves, so do the tools and workflows we use to create seamless user experiences. One such tool that has gained immense popularity is SVGR (SVG to React), a powerful library that converts SVG files into React components. This allows for the seamless integration of SVGs into React applications, making them more dynamic and interactive. In this article, we’ll explore how to configure the SVGR CLI to convert your SVG icons into React components efficiently.

What is SVGR?

SVGR is a tool that transforms SVG files into React components, enabling you to use your SVGs as React components directly. This eliminates the need for cumbersome SVG-to-JSX conversion and allows for better reusability and customization of SVG icons within your React applications.

Why Use SVGR?

• Reusable Components: Turn your SVG icons into reusable React components.
• Customization: Easily manipulate SVGs using React props.
• Efficiency: Streamline your development workflow by automating

Getting Started with SVGR CLI

To begin, we need to set up SVGR in our project. We’ll use the SVGR CLI to convert SVG files to React components. Follow these steps to get started:

Step 1: Install SVGR CLI

First, you need to install SVGR CLI globally or as a development dependency in your project. Here’s how to do it:

# Install globally
npm install -g @svgr/cli

# Or install as a dev dependency
npm install --save-dev @svgr/cli

Step 2: Convert SVG Files

Once SVGR CLI is installed, you can start converting your SVG files into React components. You can do this from the command line using the following command:

svgr path/to/your/icons --out-dir path/to/output/components

For example, if you have a directory called icons containing your SVG files and you want to output the components into a directory called components, you would run:

svgr ./icons --out-dir ./components

This command will process all SVG files in the icons directory and generate React components in the components directory.

Step 3: Customize SVGR Configuration

SVGR CLI allows for customization through a configuration file. Create a file named .svgr.config.js in the root of your project to customize the behavior of SVGR. Here’s an example configuration:

module.exports = {
  typescript: true,
  dimensions: true,
  outDir: "packages/shared/src/assets/icons",
}

Note: You can use typescript by passing typescript as true and dimensions: true will take the default dimensions from the file.

Here, is more detail on all the options you can pass:

Options - SVGR

Additionally, if you want to use typescript you need to add the following type file by your root of the project as svgr.d.ts

declare module "*.svg" {
  import { FC, SVGProps } from "react"
  const content: FC<SVGProps<SVGElement>>
  export default content
}

declare module "*.svg?url" {
  const content: any
  export default content
}

Step 3: Customize the index template

Advanced use cases could lead you to customize the index template. The --index-template <template> argument lets you specify a custom one.

Here is an example of a file where I have configured a template to export every SVG as an Icon.

For example: if my SVG image name is menu.svg -> I will be able to import and use its react component as MenuIcon

For custom configuration add this file as svgr.index.template.js on the root

// index-template.js
const path = require("path")

function defaultIndexTemplate(filePaths) {
  const exportEntries = filePaths.map(({ path: filePath }) => {
    const basename = path.basename(filePath, path.extname(filePath))
    const exportName = /^\d/.test(basename) ? `Svg${basename}` : basename
    return `export { default as ${exportName}Icon } from './${basename}'`
  })
  return exportEntries.join("\n")
}

module.exports = defaultIndexTemplate

Step 4: Write script command to make it more convenient

Go to package.json and add the following script as needed:

icon:create: "svgr --index-template svgr.index.template.js 
public/assets/icons"

This will use a specified template file and will create all SVG files from public/assets/icons as React components in the folder specified in the svgr.config.js file.

And then from your terminal just run (specific to your package manager):

yarn icon:create

Congrats 🎉, now you can import SVG file as a React Component Like a PRO in your next project.