SVGR icon

SVGR

Transform SVG into React components using SVGR

SVGR

AI-generated

Summary

Transforms SVG code into a React component using SVGR, generating component source with configurable exports, JSX runtime, SVGO optimization, and accessibility props.

Inputs

  • svgCode (required) — The SVG code to transform into a React component. Required; empty code throws an error. Example: ...
  • componentName — The name of the React component to generate. Default: 'SvgComponent'.
  • options — Transformation options group. Key sub-options: icon (boolean, default true, removes width/height for scalable icons; only affects removeDimensions when icon is false), jsxRuntime ('classic' or 'automatic', default 'classic'), prettier (boolean, default true), expandProps ('end', 'start', 'none', default 'end'), exportType ('default' or 'named', default 'default'), ref (boolean, default false, forwards ref via forwardRef), memo (boolean, default false), native (boolean, default false, generates React Native SVG code using react-native-svg), dimensions (boolean, default false, controls width/height retention; only effective when icon is false), addFillCurrentColor (boolean, default false, adds fill='currentColor' and removes existing fill attributes), titleProp (boolean, default false, adds title and titleId props for accessibility when not native), descProp (boolean, default false, adds desc and descId props for accessibility when not native), svgo (boolean, default true, enables SVGO optimization), and numerous svgo sub-options (svgoCleanupIds, svgoRemoveEmptyContainers, svgoConvertColors, svgoMinifyStyles, svgoPrefixIds, svgoCollapseGroups, svgoRemoveHiddenElems, svgoRemoveInvalidClipPath, svgoRemoveUselessDefs).
  • replaceAttrValues — Replace attribute values in the SVG (e.g., '#000' → 'currentColor'). Each replacement has a 'from' (original value) and 'to' (new value). Multiple replacements are allowed.
  • svgProps — Add custom props to the SVG element (e.g., role='img', aria-label). Each prop has a 'name' and 'value'. Multiple props are allowed.

Output shape

object returned per workflow item with properties: reactCode (string, the generated React component source code including imports, component definition, and export statement), svgCode (string, the original SVG code), componentName (string, the name of the generated component), options (object, the transform options used reflecting all input parameters).

If the node continues on fail, an item with json.error containing the error message is returned instead of throwing a workflow error.

Links

Discussion