DevToolBox무료
블로그

SVG → JSX/React 변환기

온라인으로 SVG를 JSX React 컴포넌트로 변환. SVG 속성을 카멜케이스로 변환하고 React 컴포넌트로 래핑. 무료 즉시 변환.

SVG → JSX 변환 정보

React에서 SVG 아이콘과 그래픽을 사용하려면 SVG 속성을 JSX 호환 구문으로 변환해야 합니다. 이 도구는 이러한 변환을 자동으로 처리합니다. 디자인 도구의 SVG를 재사용 가능한 React 아이콘 컴포넌트로 변환하는 데 적합합니다.

𝕏 Twitterin LinkedIn

이 도구 평가

4.8 / 5 · 55 개 평가

최신 소식 받기

주간 개발 팁과 새 도구 알림을 받으세요.

스팸 없음. 언제든 구독 해지 가능.

Enjoy these free tools?

Buy Me a Coffee

사용 방법

  1. 입력 패널에 SVG 마크업 붙여넣기
  2. 컴포넌트명 설정 및 래핑 옵션 전환
  3. 변환을 클릭하여 JSX 호환 SVG 생성
  4. 결과를 React 컴포넌트 파일에 복사

일반적인 사용 사례

  • Figma나 Illustrator의 SVG 아이콘을 React 컴포넌트로 변환
  • 재사용 가능한 React SVG 컴포넌트 아이콘 라이브러리 구축
  • 정적 HTML의 SVG 자산을 React로 마이그레이션
  • React 렌더링용 인라인 SVG 최적화

자주 묻는 질문

어떤 SVG 속성이 변환되나요?
모든 케밥케이스 SVG 속성이 카멜케이스로 변환됩니다: stroke-width → strokeWidth 등 40개 이상의 속성.
SVG를 React 컴포넌트로 래핑할 수 있나요?
예. '컴포넌트로 래핑' 옵션을 활성화하면 export가 포함된 완전한 React 컴포넌트가 생성됩니다.
React에서 xmlns를 제거하는 이유는?
xmlns 속성은 독립 실행형 SVG 파일에서만 필요합니다. JSX/React에서는 불필요합니다.
인라인 스타일을 지원하나요?
예. 인라인 스타일 문자열은 카멜케이스 속성의 JavaScript 스타일 객체로 변환됩니다.