SVG to Component
SVG를 프로덕션 수준의 React 또는 Vue 컴포넌트로 변환 — size prop, JSX 속성 자동 변환, 외부 의존성 없음.
SVG를 React 또는 Vue 컴포넌트로 즉시 변환
SVG를 React나 Vue 코드베이스에 복사하려면 속성 이름을 직접 변경하고, size prop을 추가하고, XML 선문을 정리해야 합니다. Zolkit SVG to Component 변환기가 이 모든 과정을 자동화합니다 — SVG를 붙여넣으면 수 초 안에 깔끔하고 타입이 지정된 컴포넌트를 얻을 수 있습니다.
JSX 속성 자동 변환
SVG 속성 이름을 JSX 등가물로 자동 변환합니다: stroke-width → strokeWidth, fill-rule → fillRule, class → className 등.
즉각적인 변환
타이핑 즉시 결과가 업데이트됩니다. 순수 JavaScript — 서버 통신 없음, 무거운 라이브러리 없음, WASM 없음. 빠른 브라우저 처리.
React & Vue 지원
SVGProps가 포함된 타입 지정 React 함수형 컴포넌트 또는 Composition API script setup 블록이 포함된 Vue SFC를 생성합니다. 한 번의 클릭으로 프레임워크를 전환하세요.
100% 안전
SVG 코드는 브라우저를 벗어나지 않습니다. 서버 없음, 로그 없음, 데이터 수집 없음.
영구 무료
계정 불필요, 사용 제한 없음, 결제 없음. SVG를 붙여넣고 컴포넌트를 복사하여 배포하세요.
기본 size prop 내장
생성된 모든 컴포넌트는 width와 height를 동시에 제어하는 size prop(기본값 24)을 지원하여 디자인 시스템의 어떤 크기에서도 편리하게 사용할 수 있습니다.
SVG를 컴포넌트로 변환하는 방법
- 1
입력 패널에 SVG 코드를 붙여넣거나 .svg 파일을 드롭하세요.
- 2
컴포넌트 이름을 입력하고 대상 프레임워크(React(TSX) 또는 Vue(SFC))를 선택하세요.
- 3
생성된 컴포넌트 코드를 복사하거나 다운로드를 클릭하여 .tsx 또는 .vue 파일로 저장하세요.
자주 묻는 질문
React를 위해 어떤 SVG 속성 이름이 변환되나요?
하이픈이 포함된 SVG 속성이 모두 camelCase로 변환됩니다: stroke-width → strokeWidth, fill-rule → fillRule, clip-rule → clipRule, stroke-linecap → strokeLinecap 등. class → className, xlink:href → href 같은 특수 케이스도 처리됩니다.
Vue 출력에서는 속성 이름을 변환하지 않는 이유는 무엇인가요?
Vue 템플릿은 SVG 요소의 kebab-case 속성 이름을 네이티브로 지원합니다 — 브라우저와 Vue의 컴파일러 모두 stroke-width를 올바르게 처리합니다. 변환이 필요 없으므로 Vue 출력은 원본 SVG에 더 가깝게 유지됩니다.
size prop은 어떤 역할을 하나요?
생성된 컴포넌트는 SVG의 고정 width와 height 값을 size prop(기본값 24)으로 대체합니다. 이를 통해 <MyIcon size={32} /> 또는 <MyIcon size={16} />처럼 원하는 크기로 컴포넌트를 사용할 수 있습니다.
커스텀 SVG 속성과 함께 React 컴포넌트를 사용할 수 있나요?
네. React 컴포넌트는 React.SVGProps<SVGSVGElement>를 상속하므로 fill, stroke, className, aria-label 등 유효한 SVG 속성을 prop으로 전달할 수 있습니다. 루트 <svg>의 {...props} 스프레드가 모두 전달됩니다.
<path>처럼 자식이 없는 SVG 요소는 어떻게 처리되나요?
소스에서 <elem></elem> 형태로 나타나는 일반 void SVG 요소(path, circle, rect, ellipse, line, stop 등)는 JSX에서 필요한 자기닫힘 <elem /> 형태로 자동 변환됩니다.
멀티 컬러 또는 복잡한 SVG도 처리할 수 있나요?
네. 변환기는 단순한 단일 패스 아이콘에만 국한되지 않고 SVG의 모든 요소와 속성을 처리합니다. 그라디언트, 필터, 마스크, 그룹이 모두 보존됩니다. 출력은 단순화된 버전이 아닌 컴포넌트로 래핑된 완전한 SVG입니다.