SVG → JSX 변환기

SVG → JSX 변환기란?

SVG → JSX 변환기는 일반 SVG 마크업을 컴포넌트에 바로 붙여 넣을 수 있는 유효한 React JSX로 바꿔 주는 무료 브라우저 내 도구입니다. React는 DOM 속성을 camelCase(strokeWidth, clipPath, fillRule)로 요구하고 class 대신 className을 쓰기 때문에, 손으로 붙여넣은 SVG는 정리하기 전까지 경고를 내기 쉬운데 이 도구가 그 정리를 자동으로 해 줍니다. 프론트엔드 개발자와 디자이너는 Figma, Illustrator, 아이콘 세트에서 아이콘을 내보내 재사용 가능한 React 컴포넌트로 만들 때 사용합니다. '컴포넌트로 감싸기'를 켜면 이름 있는 함수 컴포넌트를 만들고, 'TypeScript props'를 켜면 React.SVGProps로 타입을 붙여 width, height, className, 이벤트 핸들러를 전달합니다.

SVG → JSX 변환기 사용법

1. 맨 위의 SVG 입력 상자에 SVG 마크업을 붙여넣거나 입력하세요.
2. 아래 출력 상자에서 변환된 JSX를 확인하세요. 속성은 camelCase로, class는 className으로 바뀌고 빈 태그는 자동으로 셀프 클로즈됩니다.
3. 설정을 열고 '컴포넌트로 감싸기'를 켜면 맨 JSX 대신 재사용 가능한 React 함수 컴포넌트를 만듭니다.
4. 컴포넌트 이름 필드에서 감쌀 때 사용할 이름(예: MyIcon)을 지정하세요.
5. 'TypeScript props'를 켜면 타입이 붙은 React.SVGProps를 펼쳐 컴포넌트가 width, className 등의 prop을 받게 합니다.
6. 복사를 눌러 JSX를 복사한 뒤 React 또는 Next.js 프로젝트에 붙여넣으세요.

예시

<svg viewBox="0 0 24 24"><path stroke-width="2" class="icon" d="M4 12h16"></path></svg>

<svg viewBox="0 0 24 24"><path strokeWidth="2" className="icon" d="M4 12h16" /></svg>

<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"></circle></svg>

export function MyIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg viewBox="0 0 24 24" {...props}><circle cx="12" cy="12" r="10" /></svg>
  );
}

자주 묻는 질문

변환기는 제 SVG에서 무엇을 바꾸나요?

하이픈이 있거나 네임스페이스가 붙은 속성을 React의 camelCase 형태로 바꾸고(stroke-width → strokeWidth, fill-rule → fillRule, xlink:href → xlinkHref), class 속성을 className으로 바꾸며, path·rect 같은 빈 요소를 셀프 클로즈해 유효한 JSX로 만듭니다.

컴포넌트와 TypeScript 옵션은 어떻게 동작하나요?

'컴포넌트로 감싸기'가 꺼져 있으면 어디에나 둘 수 있는 인라인 JSX가 나옵니다. 켜면 입력한 컴포넌트 이름으로 SVG를 이름 있는 함수 컴포넌트로 감쌉니다. 'TypeScript props'를 켜면 그 컴포넌트에 React.SVGProps로 타입을 붙이고 {...props}를 펼쳐 width, height, className, 이벤트 핸들러를 전달합니다.

인라인 스타일도 처리하나요?

일반 속성은 변환되지만 문자열 style 속성은 JSX style 객체로 다시 쓰지 않습니다. React는 style을 camelCase 속성으로 이뤄진 객체로 기대하므로, 붙여넣은 뒤 인라인 style은 직접 확인하세요. 이 도구는 속성 이름, 셀프 클로즈, 선택적 컴포넌트 래핑에 집중합니다.

SVG가 유효하지 않으면 어떻게 되나요?

입력을 SVG 또는 XML로 파싱할 수 없으면 출력 대신 오류 메시지가 표시됩니다. 마크업에 루트 요소가 하나만 있고 태그가 짝을 이루는지 확인하면, 입력하는 대로 JSX가 다시 나타납니다.

제 SVG가 어딘가로 업로드되나요?

아니요. 변환은 브라우저 안에서만 도는 순수 문자열 처리이므로 SVG 마크업이 서버로 전송되지 않으며 오프라인에서도 작동합니다.