svgr

Convert SVG files into React components

TLDR

Transform a SVG file into a React component to stdout

$ svgr -- [path/to/file.svg]

Transform a SVG file into a React component using TypeScript to stdout

$ svgr --typescript -- [path/to/file.svg]

Transform a SVG file into a React component using JSX transform to stdout

$ svgr --jsx-runtime automatic -- [path/to/file.svg]

Transform all SVG files from a directory to React components into a specific directory

$ svgr --out-dir [path/to/output_directory] [path/to/input_directory]

Transform all SVG files from a directory to React components into a specific directory skipping already transformed files

$ svgr --out-dir [path/to/output_directory] --ignore-existing [path/to/input_directory]

Transform all SVG files from a directory to React components into a specific directory using a specific case for filenames

$ svgr --out-dir [path/to/output_directory] --filename-case [camel|kebab|pascal] [path/to/input_directory]

Transform all SVG files from a directory to React components into a specific directory without generating an index file

$ svgr --out-dir [path/to/output_directory] --no-index [path/to/input_directory]

SYNOPSIS

npx @svgr/cli [options] input-file(s)

--help
    Display help for the command.

--version
    Output the version number.

--config-file
    Path to the SVGR configuration file.

--out-dir
    Output directory for the generated components.

--ext
    Change the output files extension.

--no-svgo
    Disable SVGO optimization.

--svgo-config
    Path to the SVGO configuration file.

--template
    Path to a custom template file.

--icon
    Configure SVGR for icon usage (removes width and height).

--native
    Output React Native code.

--memo
    Wrap the component with React.memo.

--title-prop
    Add a title prop to the component.

--desc-prop
    Add a desc prop to the component.

--named-export
    Output a named export instead of default export.

--jsx-runtime
    Generate code with the new JSX transform.

--typescript
    Generate TypeScript code (adds .tsx extension).

--no-dimensions
    Remove width and height attributes from the SVG element.

--filename-case
    Change the component filename case (camel, pascal, kebab).

DESCRIPTION

SVGR is a command-line tool and Node.js library that transforms SVG (Scalable Vector Graphics) files into React components.
This allows you to import and use SVG images directly within your React applications as if they were standard React components.
SVGR handles the intricacies of SVG parsing and rendering, providing a clean and efficient way to manage SVG assets within a component-based architecture.
It optimizes SVGs for React usage, removing unnecessary attributes and ensuring compatibility.
SVGR offers various configuration options to customize the generated component, such as setting the component name, adding custom props, and controlling the output format.
It simplifies the process of integrating SVGs into React projects, streamlining development and improving code maintainability. It's particularly useful for icon libraries and complex SVG graphics.

CONFIGURATION

SVGR can be configured through a configuration file (e.g., `svgr.config.js`) to customize the generated components according to project needs. This includes setting the template, optimization options, and other settings.

HISTORY

SVGR was created to solve the problem of efficiently using SVG graphics within React applications.
Traditionally, SVGs had to be manually embedded within JSX or loaded as external assets, which could be cumbersome and inefficient.
SVGR automates the process of converting SVGs into reusable React components, simplifying development and improving performance.
It has evolved significantly over time, with the addition of features such as SVGO integration, template customization, and TypeScript support. SVGR is widely used in modern React projects to manage SVG assets effectively.