Options

SVGR ships with a handful of customizable options, usable in both the CLI and API.

Config file

Specify a custom config file.

DefaultCLI OverrideAPI Override
null--config-fileconfigFile: <string>

Runtime config

Disable runtime config (.svgrrc, .svgo.yml, .prettierrc).

DefaultCLI OverrideAPI Override
null--config-fileconfigFile: <string>

File extension

Specify a custom extension for generated files.

DefaultCLI OverrideAPI Override
"js"--extext: <string>

Icon

Replace SVG "width" and "height" value by "1em" in order to make SVG size inherits from text size.

DefaultCLI OverrideAPI Override
false--iconicon: <bool>

Native

Modify all SVG nodes with uppercase and use a specific template with react-native-svg imports. All unsupported nodes will be removed.

Override using the API with native: { expo: true } to template SVG nodes with the ExpoKit SVG package. This is only necessary for 'ejected' ExpoKit projects where import 'react-native-svg' results in an error.

DefaultCLI OverrideAPI Override
false--nativenative: <bool> or native: { expo: true }

TypeScript

Generates .tsx files with TypeScript typings.

DefaultCLI OverrideAPI Override
false--typescripttypescript: <bool>

Dimensions

Remove width and height from root SVG tag.

DefaultCLI OverrideAPI Override
true--no-dimensionsdimensions: <bool>

Expand props

All properties given to component will be forwarded on SVG tag. Possible values: "start", "end" or false ("none" in CLI).

DefaultCLI OverrideAPI Override
end--expand-propsexpandProps: <string>

Prettier

Use Prettier to format JavaScript code output.

DefaultCLI OverrideAPI Override
true--no-prettierprettier: <bool>

Prettier config

Specify Prettier config. See Prettier options.

DefaultCLI OverrideAPI Override
null--prettier-configprettierConfig: <object>

SVGO

Use SVGO to optimize SVG code before transforming it into a component.

DefaultCLI OverrideAPI Override
true--no-svgosvgo: <bool>

SVGO config

Specify SVGO config. See SVGO options.

DefaultCLI OverrideAPI Override
null--svgo-configsvgoConfig: <object>

Ref

Setting this to true will forward ref to the root SVG tag.

DefaultCLI OverrideAPI Override
false--refref: <bool>

Memo

Setting this to true will wrap the exported component in React.memo.

DefaultCLI OverrideAPI Override
false--memomemo: <bool>

Replace attribute value

Replace an attribute value by an other. The main usage of this option is to change an icon color to "currentColor" in order to inherit from text color.

DefaultCLI OverrideAPI Override
[]--replace-attr-values <old=new>replaceAttrValues: { old: 'new' }

You can specify dynamic property using curly braces: { '#000': "{props.color}" } or --replace-attr-values #000={props.color}. It is particularly useful with a custom template.

SVG props

Add props to the root SVG tag.

DefaultCLI OverrideAPI Override
[]--svg-props <name=value>svgProps: { name: 'value' }

You can specify dynamic property using curly braces: { focusable: "{true}" } or --svg-props focusable={true}. It is particularly useful with a custom template.

Title

Add title tag via title property. If titleProp is set to true and no title is provided (title={undefined}) at render time, this will fallback to existing title element in the svg if exists.

DefaultCLI OverrideAPI Override
false--title-proptitleProp: <bool>

Template

Specify a template file (CLI) or a template function (API) to use. For an example of template, see the default one.

DefaultCLI OverrideAPI Override
basic template--templatetemplate: <func>

Output Directory

Output files into a directory.

DefaultCLI OverrideAPI Override
undefined--out-dir <dirname>outDir: <string>

index.js template

Specify a template function (API) to change default index.js output (when --out-dir is used).

DefaultCLI OverrideAPI Override
basic template--index-templateindexTemplate: files => ''

Ignore existing

When used with --out-dir, it ignores already existing files.

DefaultCLI OverrideAPI Override
false--ignore-existingignoreExisting: <bool>