SVG to JSX / React Component Converter

Paste any SVG → get a clean React component with prop-forwarding and camelCase attributes

🔒 100% ブラウザ内🆓 ずっと無料⚡ サインアップ不要

注意: 下記のツールインターフェースは現時点で英語のみに対応しています。UI の翻訳は順次進めています。このツールを英語で見る →

Component nameTypeScript typingReact.memo wrap

SVG source

React component

import * as React from "react";

export const Icon = React.memo((props: React.SVGProps<SVGSVGElement>) => (
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
    <path d="M12 2v20M2 12h20"/>
  </svg>
));

export default Icon;

使い方

1
Paste SVG markup
Copy from Figma's dev mode, from an icon-library file, or paste raw <svg>…</svg>.
2
Pick component name and typing
Choose the component name, and JavaScript or TypeScript output.
3
Copy the component
Attributes are camelCased, style becomes an object, and props are forwarded to the root <svg>.

SVG to JSX / React Component Converter について

Free SVG to JSX converter. Paste any SVG markup to get a clean React functional component with camelCased attributes, prop forwarding, and TypeScript typing. Ideal for turning icon exports from Figma, Sketch, or Illustrator into ready-to-use React components. 712 Tools の SVG to JSX / React Component Converter はモダンな JavaScript API を使って完全にブラウザ内で動作します - サーバーがあなたのデータを見ることは一切ありません。つまり、即時の結果、完全なプライバシー、アップロード制限なしです。

デバッグ、簡単な確認、あるいは本番のインシデント対応まで - このツールは何度でも無料で使えます。ウォーターマークなし、サインアップなし、ツール内広告なし。

よくある質問

What gets transformed?

kebab-case attributes → camelCase (stroke-width → strokeWidth), class → className, style strings → objects, and the root <svg> forwards all props for size, color, and event handlers.

What about SVGO optimization?

This tool converts to JSX - for shrinking SVGs first, use the SVG Optimizer tool alongside it.

Is my SVG uploaded?

No. Conversion is pure string manipulation and runs entirely in your browser.

続きを読む

5 分で読了

The SVG workflow that keeps your React bundle small

How to take a Figma export from 15KB to 400 bytes, convert it into a clean React component, and ship icons without a bloated icon library.

JSON to CSV

Convert JSON arrays to downloadable CSV

Timestamp Converter

Convert between Unix time, ISO 8601, and human-readable dates

Markdown to HTML

Convert Markdown to clean HTML with live preview

YAML ↔ JSON

Convert YAML to JSON and back with full syntax validation

JSON → TypeScript

Generate TypeScript interfaces or types from a JSON sample

Base Converter

Convert between binary, octal, decimal, and hexadecimal