svgr
Convert SVG files into React components
TLDR
Transform a SVG file into a React component to stdout
Transform a SVG file into a React component using TypeScript to stdout
Transform a SVG file into a React component using JSX transform to stdout
Transform all SVG files from a directory to React components into a specific directory
Transform all SVG files from a directory to React components into a specific directory skipping already transformed files
Transform all SVG files from a directory to React components into a specific directory using a specific case for filenames
Transform all SVG files from a directory to React components into a specific directory without generating an index file
SYNOPSIS
npx @svgr/cli [options] input-file(s)
PARAMETERS
--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.
SEE ALSO
svgo(1)