SVGR

Paste in SVG. Get a react component.

This extensions uses SVGR to take raw, unoptimized SVG code and convert it to an optimized React component.

SVGR Options

You can customize the output of your react components with SVGR's options. You can reference the offical SVGR docs for further information on all of SVGR's options. This extension currently supports the following options that can be accessed with the "Customize SVGR Settings" action in the action panel.

option name	default	options	more info
dimensions	true	true false	dimensions
icon	false	true false	icon
memo	false	true false	memo
native	false	true false	native
ref	false	true false	ref
svgo	true	true false	svgo
titleProp	false	true false	titleProp
typescript	false	true false	typescript
expandProps	end	"end" "start" false	expandProps
exportType	"default"	"named" "default"	Use "named" for a named export. Use "default" for a default export.
jsxRuntime	"classic"	"classic" "automatic" "classic-preact"	jsxRuntime

SVGO Options

You can customize your SVGO configuration file like you would any SVGO configuration. This extension uses a .svgorc.json file. You can open this file with the "Open SVGO Settings" action in the action panel. For more information on SVGO configuration:

• SVGR's Documentation on SVGO
• SVGO Configuration
• SVGO Built-in Plugins
  • You can currently only use SVGO's built-in plugins to customize your SVGO configuration file.

Prettier Options

This extension does not currently support the prettier option for SVGR.