SVG → 컴포넌트 변환기는 무엇을 하나요?

원본 SVG를 재사용 가능한 React(JSX/TSX) 또는 Vue 3 컴포넌트로 변환합니다. SVG를 컴포넌트로 감싸는 것 외에도 코드를 정리하고 속성을 각 프레임워크의 올바른 형식으로 맞춥니다.

React 변환은 어떻게 작동하나요?

React에서는 속성이 camelCase로 변환되고(예: stroke-width → strokeWidth), class는 className으로, 문자열 style은 객체로 바뀝니다. SVG는 props를 svg 요소로 전달하는 함수형 컴포넌트로 감싸지며, 아이콘 시스템에 이상적입니다.

Vue 3 변환은 어떻게 되나요?

Vue 3에서는 SVG가 script setup (lang ts)를 사용하는 Single File Component의 template 블록 안에 들어갑니다. 속성은 HTML 형식(kebab-case)을 유지하며 컴포넌트가 속성을 루트 요소로 자동 전달합니다.

currentColor 옵션은 무엇에 쓰나요?

고정된 fill과 stroke 색상을 currentColor로 교체하여 아이콘이 텍스트 색상(CSS color 속성)을 상속하게 합니다. 부모 요소의 색상만 바꿔 아이콘 색을 바꿀 수 있으므로 아이콘 시스템에서 필수적입니다.

생성된 컴포넌트는 TypeScript를 지원하나요?

예. React(TSX)를 선택하면 SVGProps로 타입이 지정된 컴포넌트가 생성되고, Vue 3는 script setup (lang ts)를 사용합니다. 둘 다 별도 수정 없이 TypeScript 프로젝트에서 작동합니다.

제 SVG가 서버로 전송되나요?

아니요. 모든 변환은 JavaScript로 브라우저에서 로컬로 처리됩니다. 어떤 SVG나 코드도 ToolboxHub 서버로 전송되지 않습니다.

무료 온라인 SVG → React·Vue 컴포넌트 변환기

SVG → 컴포넌트 변환기 소개

원본 SVG를 붙여넣으면 React(JSX 또는 TSX) 또는 Vue 3의 바로 쓸 수 있는 컴포넌트를 받습니다. 이 도구는 코드를 정리하고 속성을 각 프레임워크 형식(JSX의 camelCase와 className)으로 변환하며, 색상을 currentColor로 교체하고 크기를 제거해 CSS로 아이콘을 조절할 수 있습니다. 내부 아이콘 시스템 구축에 이상적입니다. 모든 처리는 브라우저에서 로컬로 이루어집니다. 코드 크기를 줄이려면 압축기를 사용하세요.

3단계로 변환하기

1입력란에 SVG 코드를 붙여넣습니다.
2프레임워크(React JSX/TSX 또는 Vue 3)와 컴포넌트 이름을 선택합니다.
3편집하는 즉시 만들어지는 컴포넌트를 복사하거나 내려받습니다.

SVG → 컴포넌트 변환기

생성된 컴포넌트