SVG to React Component Converter

Why convert SVGs to React components?

Loading an SVG with <img src="icon.svg"> works, but it forfeits the things that make SVG worth using in the first place: you cannot style individual paths from CSS, you cannot pass props to control color or size, and you pay an extra HTTP request for every icon. Inline-rendering SVG from a React component fixes all three. The component receives props, the SVG is part of the JSX tree, and the bundler ships it as part of your JS bundle with the rest of the icon set.

The svgtools converter takes an SVG file, optimizes it with SVGO, and emits a React component you can paste straight into a project. The output handles the gotchas that catch people who hand-convert SVGs: hyphenated attributes become camelCase, class becomes className, the SVG root receives a typed props spread, and self-closing tags follow JSX rules.

JSX or TSX — which to pick

Choose TSX for any TypeScript codebase. The output types props as React.SVGProps<SVGSVGElement>, which matches the conventions of major icon libraries (lucide-react,@heroicons/react, @radix-ui/react-icons) and lets consumers pass className, onClick, aria-*attributes, and any other valid SVG prop without extra plumbing.

Pick JSX if your project does not use TypeScript or you are pasting into a sandbox/playground where types would only be noise. The runtime behavior is identical.

Step-by-step

1. Drop one or more SVG files onto the dropzone above.
2. Open the export-format dropdown and pick React (JSX) orReact (TSX).
3. Review the generated component. The component name is derived from the file name (arrow-right.svg becomes ArrowRight), and the SVG root spreads props so consumers can override width,height, fill, etc.
4. Copy to clipboard for a single file, or download the lot as a ZIP for a whole icon set.

Common pitfalls when hand-converting

• stroke-width must become strokeWidth. Same forfill-rule, clip-path, stop-color and every other hyphenated SVG attribute.
• xmlns:xlink namespaces are unnecessary in modern React/SVG and are stripped by SVGO when the corresponding xlink:href attribute is not used. Output uses href directly.
• Inline style="..." strings cannot be passed to React as-is — they must be objects. SVGR/SVGO normally avoids inline styles, but watch for them when the source SVG was hand-edited.
• Hardcoded fill colors prevent currentColor-based theming. If you want the icon to inherit text color, setfill="currentColor" in the SVG before converting.

Using converted components in Next.js

The output works in any React renderer, including Next.js Server Components. Because the SVG is JSX, you do not need next/image for icons — drop the component into a server or client component directly. For lazy-loading large illustrations, wrap the import innext/dynamic with ssr: false if the icon is purely decorative and the initial bundle size matters more than first-paint rendering.