React での SVG：生の SVG から最適化されたコンポーネントへ

Need to convert SVG to JSX for your React project? SVG is the preferred format for icons, illustrations, and logos in modern web apps, but dropping raw SVG files into React leads to broken attributes, bloated markup, and accessibility issues. This guide walks you through the full SVG to JSX conversion process: from raw SVG to optimized, reusable React components. Use our free SVG to JSX converter below for instant results.

Convert SVG to JSX/React online (free tool) →

1. Why Inline SVG in React?

There are three common ways to use SVG in React: <img> tags, CSS backgrounds, and inline SVG. Inline SVG is often the best choice because it gives you full control over styling, animation, and accessibility.

Inline SVG advantages: You can style individual paths with CSS or Tailwind classes, animate parts of the SVG, change colors dynamically via props, and add proper ARIA attributes for screen readers.

When to use <img> instead: Large, complex SVGs (maps, detailed illustrations) that don't need dynamic styling. The browser can cache these separately and they won't bloat your JS bundle.

2. Attribute Conversion: HTML to JSX

The biggest pain point when moving SVG into JSX is attribute name conversion. HTML attributes use kebab-case, but JSX requires camelCase. Here are the most common ones:

Missing even one of these conversions will trigger a React warning in the console and may cause rendering issues.

3. Removing Unnecessary Attributes

SVG files exported from design tools like Figma, Sketch, or Illustrator often include metadata and editor-specific attributes that serve no purpose in the browser:

• xmlns — not needed when SVG is inline in HTML5
• xml:space — deprecated, use CSS white-space instead
• data-name — editor layer names
• <!-- comments --> — editor comments
• id attributes — often auto-generated and may cause conflicts
• style attributes — better converted to className or Tailwind

Removing this bloat can reduce SVG size by 20–40% in many cases.

4. Creating Reusable SVG Components

Once your SVG is cleaned up, wrap it in a proper React component. A good SVG component should accept size, color, and standard SVG props:

interface IconProps extends React.SVGProps<SVGSVGElement> {
  size?: number;
  color?: string;
}

function CheckIcon({ size = 24, color = "currentColor", ...props }: IconProps) {
  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      stroke={color}
      strokeWidth={2}
      strokeLinecap="round"
      strokeLinejoin="round"
      {...props}
    >
      <polyline points="20 6 9 17 4 12" />
    </svg>
  );
}

This pattern lets you use the icon like any other component: <CheckIcon size={24} className="text-green-500" />.

5. Props Forwarding and Flexibility

Using React.SVGProps<SVGSVGElement> and the spread operator lets consumers pass any valid SVG attribute to your component — event handlers, data attributes, ARIA props, and more:

<CheckIcon
  size={32}
  color="#22c55e"
  onClick={() => console.log('clicked')}
  data-testid="check-icon"
  aria-label="Confirmed"
  role="img"
/>

Tip: Always put the spread {{...props}} after your default attributes so consumers can override defaults when needed.

6. Accessibility Best Practices

SVG icons are often invisible to screen readers unless you add proper ARIA attributes. Follow these rules:

• Decorative icons (next to text labels): Add aria-hidden="true" and focusable="false"
• Meaningful icons (standalone, no text): Add role="img" and aria-label="description"
• Interactive icons (inside buttons): The button should have aria-label; the SVG gets aria-hidden="true"

A well-structured accessible icon component handles this automatically:

function Icon({ label, ...props }: IconProps & { label?: string }) {
  if (label) {
    return (
      <svg role="img" aria-label={label} {...props}>
        {/* paths */}
      </svg>
    );
  }
  return (
    <svg aria-hidden="true" focusable="false" {...props}>
      {/* paths */}
    </svg>
  );
}

7. Free Online SVG to JSX Converter

Manually converting SVG attributes and cleaning up markup is tedious and error-prone. Use our free SVG to JSX converter to transform any SVG into a clean React component automatically:

• Converts all HTML attributes to camelCase JSX equivalents
• Removes unnecessary metadata and editor attributes
• Formats the output as a clean React component
• Preserves viewBox and essential SVG structure

Paste your raw SVG and get a production-ready JSX component in seconds.

Convert SVG to JSX/React online (free tool) →

Frequently Asked Questions

Should I use inline SVG or an SVG sprite system?

For small to medium projects (under 50 icons), inline SVG components are simpler and more flexible. For large icon libraries, consider an SVG sprite with <use> references to reduce bundle size. Both approaches work well with React.

Does inline SVG increase my JavaScript bundle size?

Yes, each inline SVG adds to your component's JS bundle. For small icons (under 1KB each), this is negligible. For large, complex SVGs, consider using <img> tags or dynamic imports to keep the initial bundle small.

Can I animate inline SVG in React?

Absolutely. Inline SVG gives you full access to individual elements. You can use CSS transitions, CSS animations, Framer Motion, or React Spring to animate paths, groups, and attributes. This is one of the key advantages over <img>-based SVG.

Related Developer Tools and Guides

• SVG to JSX Converter - Convert SVG to React components instantly
• SVG Optimizer - Optimize and minify SVG files
• HTML to JSX Converter - Convert HTML to React JSX
• Image to Base64 - Convert images to Base64 data URIs
• HTML to JSX: React Migration Guide
• SVG ViewBox Explained