SVG React JSX 변환기

붙여넣거나 업로드한 SVG 파일을 camelCase 속성, 선택적 TypeScript props, forwardRef, React.memo, title 접근성, style 객체 변환 및 보안 살균(Sanitize) 처리가 완료된 깔끔한 React JSX 컴포넌트로 변환합니다.

무료로 사용가입 필요 없음즉시 결과 확인

SVG React JSX 변환기지금 무료로 사용하기 ▼

SVG 소스

전체 <svg> 요소를 붙여넣으세요. 서버는 최대 220000자까지 허용합니다.

.svg 파일 업로드

파일을 업로드하면 미리보기를 위해 에디터가 채워지며, 변환 시 업로드된 파일이 사용됩니다.

입력 <svg>

정규화 camelCase

React {...props}

출력 컴포넌트

요소 개수 0

속성 개수 0

ViewBox -

컴포넌트 이름

AlertIcon, BrandMark, 또는 LogoGlyph와 같은 PascalCase를 사용하세요.

출력 설정

내보내기 스타일

인라인 스타일 처리

TypeScript props forwardRef 지원 React.memo로 감싸기 접근 가능한 title prop 스크립트 및 핸들러 새니타이징 1em 아이콘 크기 조정 사용 {...props} 추가

Embed SVG React JSX 변환기 Widget

SVG React JSX 변환기 정보

SVG React JSX 변환기는 원시 SVG 파일을 재사용 가능한 React 컴포넌트로 변환해 줍니다. 모든 SVG 속성을 수동으로 수정할 필요 없이 더 깔끔한 아이콘 컴포넌트, 브랜드 마크, 제품 일러스트레이션 및 디자인 시스템 에셋이 필요한 개발자를 위해 만들어졌습니다. SVG 마크업을 붙여넣거나 UTF-8 형식의 .svg 파일을 업로드하고, 필요한 React 옵션을 선택한 다음 생성된 컴포넌트를 프로젝트에 복사해 사용하세요.

사용 방법

SVG 붙여넣기 또는 업로드. 전체 SVG 파일을 에디터에 붙여넣거나 UTF-8 형식의 .svg 파일을 업로드합니다.
컴포넌트 이름 지정. AlertIcon 또는 BrandMark와 같이 PascalCase 형태의 React 컴포넌트 이름을 입력합니다.
React 옵션 선택. TypeScript, forwardRef, React.memo, title 접근성, 스타일 변환, 새니타이징 및 prop 스프레드 옵션을 선택합니다.
JSX로 변환. 'React 컴포넌트로 변환'을 클릭하여 바로 복사 가능한 JSX 코드를 생성합니다.
검토 및 복사. React 프로젝트에 복사하기 전에 변환 요약, 경고 및 생성된 코드를 검토합니다.

변환기 처리 사항

React 속성 정리stroke-width, fill-rule, clip-path와 같은 일반적인 SVG 속성들이 strokeWidth, fillRule, clipPath로 재작성됩니다.

컴포넌트 인체공학적 설계선택적인 {...props}, forwardRef, React.memo, default export, named export 및 TypeScript props를 통해 출력물을 React 코드베이스에 쉽게 적용할 수 있습니다.

더 안전한 출력물 검토새니타이징 기능은 기본적으로 스크립트 태그, 인라인 이벤트 핸들러 및 javascript: 링크를 제거하므로 생성된 JSX를 사용 전에 더 안전하게 검사할 수 있습니다.

더 나은 React SVG 컴포넌트를 위한 팁

원래의 viewBox는 SVG가 확장되는 방식을 제어하므로 가능하면 그대로 유지하는 것이 좋습니다. 아이콘 시스템의 경우, width="1em" 및 height="1em" 설정을 사용하면 아이콘이 텍스트 크기를 상속받으면서도 호출자가 props를 통해 크기를 오버라이드할 수 있게 됩니다. 설명적인 PascalCase 컴포넌트 이름을 사용하고, 장식용 SVG는 적절한 경우 aria-hidden을 사용하여 접근성을 유지하며, 정보를 전달하는 의미 있는 아이콘에는 title prop을 사용하세요.

자주 묻는 질문 (FAQ)

이 SVG to React 변환기는 무엇을 변경하나요?

SVG XML을 파싱하고 className, camelCase로 변환된 SVG 속성, 선택적 스타일 객체, props, forwardRef, title 접근성 및 export 구문을 포함하여 React 친화적인 JSX로 SVG 속성을 재작성합니다.

Can I upload an SVG file?

네. UTF-8 형식의 .svg 파일을 업로드하거나 SVG 마크업을 붙여넣을 수 있습니다. 업로드된 파일은 텍스트로 읽혀 서버에서 JSX로 변환됩니다.

Does it sanitize SVG code?

새니타이징은 기본적으로 활성화되어 있습니다. 변환기는 스크립트 태그, 인라인 이벤트 핸들러 및 javascript: 링크를 제거하므로 생성된 컴포넌트를 사용하기 전에 더 안전하게 검토할 수 있습니다.

Why convert style attributes to objects?

React는 JSX를 작성할 때 style prop이 객체 형태이기를 기대합니다. 스타일 문자열을 객체로 변환하면 출력이 깔끔하게 컴파일되고 CSS 속성 이름이 camelCase로 유지됩니다.

What is the best component name format?

AlertIcon 또는 BrandMark와 같은 PascalCase를 사용하세요. 변환기는 잘못된 문자를 정리하고 결과물이 유효한 React 컴포넌트 식별자로 시작하도록 보장합니다.

이 콘텐츠, 페이지 또는 도구를 다음과 같이 인용하세요:

"SVG React JSX 변환기" - https://MiniWebtool.com/ko/svg-react-jsx-변환기/에서 MiniWebtool 인용, https://MiniWebtool.com/

by miniwebtool team. 업데이트됨: 2026-05-22