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을 사용하세요.