ZeroTool Workbench
SVG → JSX 변환기
SVG를 React JSX 컴포넌트로 브라우저에서 즉시 변환. 카멜케이스 속성, className, TypeScript, forwardRef, memo 래핑 지원. 무료, 회원가입 불필요.
사용 방법
- 왼쪽 텍스트 영역에 SVG 코드를 붙여넣습니다.
- 컴포넌트 이름을 입력합니다(기본값:
MyIcon). 첫 글자는 자동으로 대문자가 됩니다. - 필요에 따라 TypeScript, forwardRef, memo 옵션을 토글합니다.
- JSX 컴포넌트 출력이 오른쪽 텍스트 영역에 즉시 나타납니다.
- 복사를 클릭해 클립보드에 복사합니다.
속성 변환 규칙
| SVG | JSX |
|---|---|
stroke-width | strokeWidth |
stroke-linecap | strokeLinecap |
fill-rule | fillRule |
clip-path | clipPath |
class | className |
font-size | fontSize |
text-anchor | textAnchor |
xmlns="..." | (제거됨) |
출력 모드
- 기본: TypeScript 주석 없는 일반 함수 컴포넌트.
- TypeScript:
React.FC<React.SVGProps<SVGSVGElement>>타입 적용. className, style, onClick이 타입 안전하게 작동합니다. - forwardRef:
React.forwardRef로 감싸 부모 컴포넌트에 SVG 요소 ref를 공개합니다. - memo: 최종 내보내기를
React.memo로 감싸 불필요한 리렌더링을 방지합니다.
주요 사용 사례
- Figma나 Illustrator에서 내보낸 SVG를 React 아이콘 컴포넌트로 변환
- SVG 아이콘 라이브러리를 JSX 기반 디자인 시스템으로 마이그레이션
- SVG 아이콘이 className, style 등 React props를 받을 수 있도록 설정
- props 스프레드로 aria-label을 받는 접근성 아이콘 컴포넌트 구축
FAQ
SVG to JSX 변환기는 무엇을 하나요?
원시 SVG 파일을 재사용 가능한 React 컴포넌트로 변환합니다. 주요 변환 내용: 하이픈 속성을 카멜케이스로 변환(stroke-width → strokeWidth), class를 className으로 변경, xmlns 선언 제거, SVG 마크업을 함수 컴포넌트로 감쌉니다.
SVG 속성을 왜 변환하나요?
JSX는 JavaScript로 컴파일되며, 하이픈 속성명은 유효한 JS 식별자가 아닙니다. React는 strokeWidth, fillRule, clipPath 등 카멜케이스 형식을 요구합니다.
TypeScript 옵션은 무엇을 하나요?
활성화하면 React.FC<React.SVGProps<SVGSVGElement>> 타입이 적용되어 className, style, onClick 등 SVG 속성의 자동완성을 포함한 완전한 TypeScript 지원을 제공합니다.
forwardRef는 무엇에 사용하나요?
forwardRef를 사용하면 부모 컴포넌트가 SVG 요소에 ref를 전달할 수 있습니다. DOM 노드에 프로그래밍 방식으로 접근해야 할 때(크기 측정, 애니메이션 등) 유용합니다.
memo 래핑의 효과는 무엇인가요?
React.memo로 컴포넌트를 감싸면 props가 변경될 때만 리렌더링됩니다. 대부분의 렌더링에서 동일한 props를 받는 아이콘 컴포넌트의 성능 최적화에 효과적입니다.
서버로 데이터가 전송되나요?
아니요. 변환은 전적으로 브라우저의 JavaScript로 처리됩니다. SVG 데이터는 전송되지 않습니다.