@svgr/cli

What is @svgr/cli?

@svgr/cli is a command-line tool that allows you to transform SVG files into React components. It provides a simple and efficient way to integrate SVGs into your React applications, offering various customization options and optimizations.

What are @svgr/cli's main functionalities?

Convert SVG to React Component

This command converts an SVG file into a React component and saves it in the specified output directory. It simplifies the process of using SVGs in React applications by automating the conversion.

npx @svgr/cli path/to/icon.svg --out-dir src/components

Optimize SVG

This command not only converts the SVG to a React component but also optimizes the SVG using SVGO (SVG Optimizer) with a custom configuration file. This helps in reducing the file size and improving performance.

npx @svgr/cli path/to/icon.svg --out-dir src/components --svgo-config ./svgo.config.js

Custom Template

This command allows you to use a custom template for generating the React component. You can define your own template to control the structure and styling of the generated component.

npx @svgr/cli path/to/icon.svg --out-dir src/components --template ./template.js

TypeScript Support

This command generates TypeScript React components from SVG files. It is useful for TypeScript projects, ensuring type safety and better integration with TypeScript tooling.

npx @svgr/cli path/to/icon.svg --out-dir src/components --typescript

Other packages similar to @svgr/cli

react-svg-loader

react-svg-loader is a Webpack loader that transforms SVGs into React components. Unlike @svgr/cli, it is used within a Webpack build process, making it suitable for projects that already use Webpack for bundling.

svg-react-loader

svg-react-loader is another Webpack loader for converting SVGs to React components. It offers similar functionality to @svgr/cli but is integrated into the Webpack build pipeline, providing a seamless development experience for Webpack users.

react-inlinesvg

react-inlinesvg is a React component that loads and injects SVGs inline. Unlike @svgr/cli, it does not convert SVGs to React components but allows you to use SVGs directly in your React components, providing a different approach to SVG integration.

README

@svgr/cli

Command Line Interface for SVGR.

npm install @svgr/cli

Usage

Usage: svgr [options] <file|directory>

Options:
  -V, --version                    output the version number
  --config-file <file>             specify the path of the svgr config
  --no-runtime-config              disable runtime config (".svgrrc", ".svgo.yml", ".prettierrc")
  -d, --out-dir <dirname>          output files into a directory
  --ext <ext>                      specify a custom file extension (default: "js")
  --filename-case <case>           specify filename case ("pascal", "kebab", "camel") (default: "pascal")
  --icon                           use "1em" as width and height
  --native                         add react-native support with react-native-svg
  --ref                            forward ref to SVG root element
  --no-dimensions                  remove width and height from root SVG tag
  --expand-props [position]        disable props expanding ("start", "end", "none") (default: "end")
  --svg-props <property=value>     add props to the svg element
  --replace-attr-values <old=new>  replace an attribute value
  --template <file>                specify a custom template to use
  --title-prop                     create a title element linked with props
  --prettier-config <fileOrJson>   Prettier config
  --no-prettier                    disable Prettier
  --svgo-config <fileOrJson>       SVGO config
  --no-svgo                        disable SVGO
  -h, --help                       output usage information

  Examples:
    svgr --replace-attr-values "#fff=currentColor" icon.svg

License

MIT