SVG to React Component
Convert SVG into a React component with props forwarded
What is SVG to React Component?
This SVG to React converter rewrites icon markup as a function component: hyphenated attributes become camelCase, xmlns is removed, and props are spread onto the root element. You can emit either a TypeScript or a JavaScript version, and the conversion runs entirely in your browser.
How to use SVG to React Component
- 1Paste the SVG source.
- 2Enter a component name. It is converted to PascalCase automatically.
- 3Choose whether to include TypeScript type annotations.
- 4Copy the component into your project icon directory.
Frequently asked questions
Why forward props onto the root svg element?+
It is what lets callers control size, color, and accessibility attributes, as in <PlusIcon width={20} aria-hidden />. Set stroke to currentColor and let the surrounding text color drive it, and one component adapts to every theme you have.
What is the best way to convert icons in bulk?+
Once a project has a large icon set, use the SVGR build plugin so that .svg imports are compiled into components at build time. That removes the manual step and stops the icon files and the components from drifting apart. This tool is best for adding the occasional one-off icon.
Related tools
All toolsJSON to YAML Converter
Convert JSON to YAML while preserving the nesting
YAML to JSON Converter
Convert YAML to JSON, multi-document files included
JSON to CSV Converter
Convert a JSON array of objects to CSV, with nested fields flattened automatically
CSV to JSON Converter
Convert CSV to JSON with automatic header and delimiter handling
JSON to TypeScript
Infer TypeScript type definitions from JSON
JSON to Go Struct
Convert JSON to Go structs with json tags filled in