SVG → JSX 변환기

SVG → JSX 변환기란?

SVG → JSX 변환기는 일반 SVG 마크업을 컴포넌트에 바로 붙여 넣을 수 있는 유효한 React JSX로 바꿔 주는 무료 브라우저 내 도구입니다. React는 DOM 속성을 camelCase(strokeWidth, clipPath, fillRule)로 요구하고 class 대신 className을 쓰며 style 속성을 문자열이 아니라 camelCase 속성으로 이뤄진 객체로 요구하는데, 이 도구가 그 모든 것을 자동으로 고쳐 줍니다. 프론트엔드 개발자와 디자이너는 Figma, Illustrator, 아이콘 세트에서 아이콘을 내보낼 때 사용합니다. 선택적인 정리를 켜면 주석·편집기 메타데이터·XML 선언을 걷어낼 수 있고, 출력을 인라인 JSX로 할지 React.SVGProps로 타입을 붙인 함수·memo()·forwardRef 컴포넌트로 할지 고를 수 있습니다.

SVG → JSX 변환기 사용법

1. SVG 마크업을 입력 상자에 붙여넣거나 .svg 파일을 드롭 영역에 끌어다 놓으세요.
2. 아래 출력 상자에서 변환된 JSX를 확인하세요. 속성은 camelCase로, class는 className으로, 인라인 style은 style 객체로 바뀌고 빈 태그는 자동으로 셀프 클로즈됩니다.
3. 설정을 열고 '컴포넌트 출력'을 고르세요: 인라인 JSX, 함수 컴포넌트, memo() 컴포넌트, forwardRef 컴포넌트.
4. 컴포넌트 이름 필드에서 감쌀 때 사용할 이름(예: MyIcon)을 지정하세요.
5. 'TypeScript props'를 켜면 React.SVGProps로 타입을 붙이고, 'SVG 정리'를 켜면 먼저 주석과 편집기 메타데이터를 걷어냅니다.
6. 복사를 눌러 JSX를 복사한 뒤 React 또는 Next.js 프로젝트에 붙여넣으세요.

예시

<svg viewBox="0 0 24 24"><path stroke-width="2" style="fill:none;stroke-linecap:round" d="M4 12h16"/></svg>

<svg viewBox="0 0 24 24"><path strokeWidth="2" style={{ fill: "none", strokeLinecap: "round" }} d="M4 12h16" /></svg>

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

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

자주 묻는 질문

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

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

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

인라인 JSX를 고르면 마크업을 어디에나 둘 수 있고, 입력한 컴포넌트 이름으로 함수·memo()·forwardRef 컴포넌트로 감쌀 수도 있습니다. forwardRef 컴포넌트는 ref를 받아 루트 svg에 붙입니다. 'TypeScript props'를 켜면 어떤 래퍼든 React.SVGProps로 타입이 붙고 {...props}가 펼쳐집니다.

인라인 스타일도 변환하나요?

네. style="fill:red;stroke-width:2" 같은 속성은 style={{ fill: "red", strokeWidth: "2" }} 같은 JSX style 객체로 다시 쓰이며, 속성 이름은 camelCase로 바뀌고 값은 문자열로 유지됩니다. CSS 커스텀 속성(--var)은 문자열 키로 보존됩니다.

SVGO식 정리는 무엇을 하나요?

'SVG 정리'를 켜면 XML 선언, DOCTYPE, 주석, <metadata>, inkscape: 와 sodipodi: 같은 편집기 네임스페이스, svg의 version 속성을 걷어내고 공백을 줄입니다 — 모두 JSX 변환 전에 이뤄집니다.

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

아니요. 파일을 끌어다 놓거나 마크업을 붙여넣는 것 모두 브라우저 안에서만 도는 순수 문자열 처리이므로 SVG가 서버로 전송되지 않으며 오프라인에서도 작동합니다.