SVG to React: JSX, TypeScript, currentColor, and Next.js

The SVG to React converter handles common attribute-name changes and wraps SVG markup in a component shape. It is a starting point for a codebase, not a substitute for reviewing accessibility, imports, styling conventions, and complex SVG features in your own application.

Why raw SVG fails in JSX

JSX is JavaScript syntax that resembles HTML, but several SVG attributes use names that conflict with JSX conventions. Attributes such as stroke-width, fill-rule, and clip-path are commonly written as strokeWidth, fillRule, and clipPath in React output. XML comments, namespaces, style strings, and inline event attributes may also need review.

Common attribute mappings

Example: from SVG markup to a typed component

A small icon can become a component that accepts standard SVG props. The following example is intentionally minimal so the transformation is easy to inspect.

<svg viewBox="0 0 24 24" aria-hidden="true">
  <path stroke-width="2" fill-rule="evenodd" d="M3 12h18" />
</svg>

import type { SVGProps } from "react";

type IconProps = SVGProps<SVGSVGElement>;

export function LineIcon(props: IconProps) {
  return (
    <svg viewBox="0 0 24 24" aria-hidden="true" {...props}>
      <path strokeWidth={2} fillRule="evenodd" d="M3 12h18" />
    </svg>
  );
}

Use props deliberately

Extending SVGProps<SVGSVGElement> makes common attributes such as className, width, height, role, and event handlers available to the component. Decide whether props should be spread before or after fixed attributes. Spreading them after a fixed value allows a caller to override that value; spreading them before a fixed value makes the component’s value win.

export function Logo(props: SVGProps<SVGSVGElement>) {
  return <svg viewBox="0 0 24 24" {...props} />;
}

Make icons themeable with currentColor

If an icon should follow surrounding text or a design-system color token, replace suitable hardcoded fills and strokes with currentColor. FromSVG’s SVG to currentColor tool can help with that focused transformation. Preserve intentional multicolor fills and transparent values instead of converting every color without review.

<button className="text-emerald-400 hover:text-white">
  <LineIcon className="h-5 w-5" aria-label="Search" />
</button>

Next.js, Vite, and component-library checks

The generated component can be adapted to common React environments, but each project has its own lint, formatting, TypeScript, and server-rendering rules. In Next.js, decide whether the component needs client-only behavior; a static SVG component normally does not. In Vite, verify the import path and TypeScript configuration. In a component library, add a stable accessible-name policy and test the icon at multiple sizes and colors.

What generated conversion does not decide for you

• Accessibility: choose between a meaningful accessible name, a decorative aria-hidden icon, or a visible text label.
• Security: review untrusted SVG before rendering it. Conversion to JSX is not a complete sanitizer.
• Complex features: test masks, filters, external references, embedded images, animations, and styles that depend on document context.
• API design: decide which dimensions, colors, labels, and event handlers should be part of your reusable component contract.

React conversion checklist

1. Run the source SVG through the SVG analyzer and check its structure before conversion.
2. Convert common attributes and inspect the generated JSX for imports and project conventions.
3. Choose an accessibility behavior for every icon.
4. Use currentColor only where inherited color is appropriate.
5. Test the component in the target React environment at the sizes, colors, and backgrounds that matter.