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를 사용해 여러분의 browser에서 완전히 동작합니다 - server가 여러분의 데이터를 볼 일이 절대 없습니다. 즉, 즉각적인 결과, 완전한 프라이버시, 그리고 업로드 제한이 없습니다.

debugging 세션, 빠른 sanity check, 또는 프로덕션 인시던트 - 어떤 상황이든 이 툴은 원하는 만큼 무료로 사용할 수 있습니다. 워터마크 없음, 가입 없음, 툴 내 광고 없음.

자주 묻는 질문

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