Command Line

Use SVGR from command line to transform a single file or a whole directory.

Install

Depending you usage, you can install @svgr/cli locally in your project:

npm install --save-dev @svgr/cli
# or use yarn
yarn add --dev @svgr/cli

or use it on the fly using npx @svgr/cli.

Options

All SVGR options are available from command line or in configuration. Command line options have precedence over config file options.

Transform a single file

From file

Transforms a single file by specifying file as the single argument.

npx @svgr/cli -- icons/clock-icon.svg

From standard input

@svgr/cli supports standard input, just redirect file contents using < operator.

npx @svgr/cli < icons/clock-icon.svg

Output the result in another file

You can easily create another file using > operator.

npx @svgr/cli -- icons/clock-icon.svg > dist/ClockIcon.js

Transform a whole directory

Transforms a whole directory using --out-dir option. All SVG presents in this directory tree are transformed into React components.

# Usage: npx @svgr/cli [--out-dir dir] [--ignore-existing] [src-dir]
$ npx @svgr/cli --out-dir dist -- icons
icons/web/clock-icon.svg -> dist/web/ClockIcon.js
icons/web/wifi-icon.svg -> dist/web/WifiIcon.js
icons/spinner/cog-icon.svg -> dist/spinner/CogIcon.js
icons/spinner/spinner-icon.svg -> dist/spinner/SpinnerIcon.js

Avoid replacing existing files

Even if it is not recommended, you may be tempted to modify generated files. If you do so, you should use the --ignore-existing option to avoid replacing existing files.

npx @svgr/cli --out-dir dist --ignore-existing -- icons

Use a different filename case

By default, filenames uses "PascalCase", you can specify a different case for generated files using --filename-case option.

npx @svgr/cli --out-dir dist --filename-case kebab -- icons

Disable index generation

By default an index is generated, giving you opportunity to import all your components from the directory. If you does not want auto-generated index, turn it off using --no-index option.

npx @svgr/cli --out-dir dist --no-index -- icons

Use a custom index template

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

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

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

module.exports = defaultIndexTemplate

npx @svgr/cli  --out-dir dist --index-template index-template.js -- icons