svgr

Transform a SVG file into a React component to stdout

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

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

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

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

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

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

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

npx @svgr/cli [options] <input-path>
svgr [options] <input-path> (if installed globally)

input-path can be a file, directory, or glob pattern.

--help, -h
    Displays usage information and exits.

--version, -v
    Outputs the current svgr package version.

--out-dir <dir>
    Specifies the output directory for generated components.

--filename <name>
    Sets a specific output filename when processing a single input.

--ext <ext>
    Defines the file extension for generated component files (e.g., .jsx, .tsx).

--icon
    Treats the SVG as an icon, setting default width/height to '1em'.

--native
    Generates a React Native compatible component.

--typescript
    Outputs a TypeScript (.tsx) component.

--dimensions
    Keeps width and height attributes in the SVG.

--no-dimensions
    Removes width and height attributes from the SVG.

--ref
    Wraps the component with React.forwardRef.

--memo
    Wraps the component with React.memo.

--title-prop
    Adds a 'title' prop to the SVG element.

--desc-prop
    Adds a 'desc' prop to the SVG element.

--expand-props
    Expands props onto the SVG element.

--no-svgo
    Disables SVG optimization using SVGO.

--no-prettier
    Prevents code formatting with Prettier.

--config-file <path>
    Specifies a custom configuration file path.

--config <key>=<value>
    Overrides configuration options directly.

--ignore-existing
    Skips processing files that already exist in the output directory.

--template <path>
    Uses a custom template file for component generation.

--prettier-config <path>
    Path to a custom Prettier configuration file.

--svgo-config <path>
    Path to a custom SVGO configuration file.

--jsx-runtime <classic|automatic>
    Sets the JSX runtime mode (React 17+).

--filename-case <kebab|camel|pascal>
    Controls the casing of output filenames.

--replace-attribute <attr>=<value>
    Replaces an attribute's value in the SVG.

svgr is a command-line tool within the SVGR ecosystem, designed to convert SVG (Scalable Vector Graphics) files into ready-to-use React components. It automates the process of importing vector assets into React applications, eliminating the need for manual conversion or complex SVG manipulation. The tool leverages SVGO for SVG optimization and Prettier for code formatting, ensuring efficient and readable output. It supports various configurations, allowing developers to control aspects like component naming, icon-specific attributes, TypeScript generation, and custom templates.

While not a native Linux command, svgr is executed via Node.js (typically with npx or as a globally installed package) and is widely adopted in modern front-end development workflows for its efficiency in handling SVG assets.

svgr is not a pre-installed Linux command. It requires a Node.js runtime and is typically installed via npm or yarn. Its primary use case is within web development, specifically for React applications, and may not be relevant for general-purpose system administration tasks. Complex transformations might require a deep understanding of SVG, SVGO, and Prettier configurations.

svgr offers extensive configuration options, allowing developers to define behaviors through command-line flags, dedicated configuration files (e.g., `.svgrrc.js`, `svgr.config.js`), or directly within `package.json`. This layered approach enables fine-grained control over SVG optimization (SVGO), code formatting (Prettier), and the generated React component structure.

Beyond its standalone CLI usage, svgr is often integrated into front-end build pipelines using tools like Webpack (`@svgr/webpack`), Rollup (`@svgr/rollup`), or Vite. This allows SVG imports to be automatically transformed into React components during the bundling process, simplifying development and deployment.

The SVGR project, including the svgr CLI tool, was initiated and primarily developed by Greg Bergé. It gained significant traction around 2018-2019 as React development matured and the need for efficient SVG asset management became more apparent. Its adoption was fueled by its robust features, configurability, and seamless integration with popular build tools and frameworks, making it an essential utility for front-end developers working with SVG icons and graphics. It continues to be actively maintained and widely used in the JavaScript ecosystem.

node(1), npm(1), npx(1), yarn(1), prettier(1), svgo(1)