원시 SVG를 React 프로젝트에 붙여넣어 본 개발자라면 이 고충을 잘 알 것입니다.
원시 SVG는 clip-rule, fill-opacity, stroke-linecap처럼 하이픈이 포함된 속성을 사용합니다. React는 clipRule, fillOpacity, strokeLinecap처럼 camelCase를 요구합니다. 하나라도 빠뜨리면 런타임 오류나 추적하기 어려운 스타일 버그가 발생합니다.
Figma와 Sketch는 fill="#3B82F6"처럼 색상이 내장된 SVG를 내보냅니다. 각 아이콘은 일회용이 됩니다. 다크 테마, 호버 상태, 다른 브랜드 색상에 재사용하려면 복사본을 만들어 수작업으로 수정해야 합니다.
디자인 도구는 내보낸 SVG마다 <title>, <defs>, 빈 <g> 그룹, 중복 속성을 추가합니다. 이 불필요한 코드는 JSX 번들을 부풀리고 파싱 속도를 낮춥니다 — 특히 수십 개의 인라인 아이콘을 사용할 때 두드러집니다.
왼쪽에 SVG를 붙여넣고 오른쪽에서 React 컴포넌트를 받으세요
6가지 프로덕션 수준의 변환을 즉시, 모두 브라우저에서 처리합니다.
SVG를 붙여넣으면 React 컴포넌트가 즉시 나타납니다. SVG to React 변환은 브라우저 내 AST 변환으로 실행됩니다 — 네트워크 왕복 없음, 지연 없음, 파일 크기 제한 없음.
TSX 모드를 활성화하면 변환기가 파일 상단에 interface IconProps extends React.SVGProps<SVGSVGElement>를 자동으로 추가합니다. className, 커스텀 속성에 타입 강제 변환 없이 모든 props가 완전히 타입화됩니다.
SVG to React 변환 전에 도구가 Figma나 Sketch가 내보낸 <title>, <defs>, 빈 그룹, 중복 속성을 제거하고 경로를 병합 및 단순화합니다 — SVG to React 출력을 최대 60%까지 줄입니다.
Tailwind 모드를 켜면 SVG to React 변환기가 하드코딩된 fill 및 stroke 색상을 className="fill-current"와 currentColor로 교체합니다. 아이콘이 부모 텍스트 색상을 즉시 상속받아 어떤 테마에도 완벽하게 작동합니다.
하이픈이 포함된 모든 SVG 속성 — clip-rule, fill-opacity, stroke-linecap, xlink:href — 이 React의 camelCase 등가물로 자동 이름이 변경되고 class는 className이 됩니다. SVG to React 출력은 항상 유효한 JSX입니다.
버튼 하나로 SVG 루트 요소의 하드코딩된 width 및 height를 제거하세요. SVG to React 컴포넌트가 CSS 또는 className prop을 통해 크기를 조정하게 되어 완전히 반응형이 되고 부모 레이아웃에서 쉽게 제어할 수 있습니다.
원시 SVG 내보내기부터 붙여넣기 가능한 React 컴포넌트까지 30초 이내
Figma, Sketch, 아이콘 라이브러리 또는 SVG 파일에서 SVG 소스를 복사하여 SVG to React 도구의 왼쪽 패널에 붙여넣습니다. 다중 경로 아이콘과 복잡한 일러스트를 포함한 모든 유효한 SVG를 허용합니다.
프로젝트 요구 사항에 맞게 출력 형식과 최적화를 선택합니다. 타입이 지정된 props가 있는 TSX 출력을 위해 TypeScript를 켜고, SVG to React 변환 전에 Figma 노이즈를 정리하기 위해 SVGO를 켜고, 하드코딩된 색상을 currentColor로 교체하기 위해 Tailwind CSS를 켭니다.
입력하는 동안 오른쪽 패널에 SVG to React 출력이 실시간으로 표시됩니다. 복사를 클릭하여 React 컴포넌트를 클립보드로 보내고, .jsx 또는 .tsx 파일에 바로 붙여넣습니다 — 형식 조정 불필요.
디자인 시스템 구축, 번들 크기 최적화, 완성도 높은 아이콘 제공 등 SVG to React 도구가 여러분의 워크플로우를 지원합니다.
왼쪽에 원시 SVG를 붙여넣으면 오른쪽에 React 컴포넌트가 실시간으로 나타납니다. SVG to React 변환은 순수 브라우저 내 AST 순회로 실행됩니다 — 대기 없음, 서버 없음, 속도 제한 없음.
SVG to React 출력을 JSX에서 TSX로 전환하면 자동으로 interface IconProps extends React.SVGProps<SVGSVGElement>가 생성됩니다. 각 CSS 클래스, aria 레이블, 이벤트 핸들러가 완전히 타입화되어 엄격 모드의 Next.js 또는 Vite 프로젝트에 바로 사용할 수 있습니다.
변환기가 SVG to React 변환 전에 SVGO 압축을 실행합니다 — Figma 메타데이터 제거, 중복 경로 병합, 파일 크기 최대 60% 절감. Tailwind 모드가 하드코딩된 fill 색상을 currentColor로 교체하여 각 아이콘이 CSS 오버라이드 없이 모든 테마에 적응합니다.
SVG to React 컴포넌트 변환, TypeScript props 및 SVG 최적화에 관한 일반적인 질문입니다.
SVG to React는 Figma, Sketch 또는 아이콘 라이브러리에서 내보낸 원시 SVG 파일을 재사용 가능한 React 함수형 컴포넌트로 변환하는 것입니다. SVG 마크업이 JSX가 되고, 하이픈이 포함된 속성이 camelCase가 되며, 컴포넌트가 className, width, aria-label 등의 props를 허용합니다.
SVG를 React 컴포넌트로 인라인하면 CSS로 fill과 stroke를 제어하고, Framer Motion으로 개별 경로에 애니메이션을 적용하고, 접근성을 위해 ARIA 레이블을 추가하고, 빌드 시 사용하지 않는 아이콘을 트리 셰이킹할 수 있습니다. <img> 태그는 SVG를 불투명한 이미지로 취급하여 이러한 기능을 제공하지 않습니다.
네. TypeScript 토글을 켜면 SVG to React 출력이 .jsx에서 .tsx 형식으로 전환됩니다. 변환기가 파일 상단에 interface IconProps extends React.SVGProps<SVGSVGElement>를 자동으로 생성하여 모든 props에 완전한 타입 커버리지를 제공합니다.
SVG to React 도구는 알려진 모든 하이픈 속성을 처리합니다: clip-rule → clipRule, fill-opacity → fillOpacity, stroke-linecap → strokeLinecap, stroke-linejoin → strokeLinejoin, stroke-width → strokeWidth, xlink:href → href, class → className. 출력은 항상 유효한 JSX입니다.
SVG to React 변환 전에 도구가 브라우저에서 JavaScript SVGO 순회를 실행하여 디자인 도구가 생성한 <title>, <desc>, <defs>, 빈 <g> 요소, 중복 프레젠테이션 속성을 제거하고 경로를 병합 및 단순화하여 더 가벼운 React 컴포넌트를 생성합니다.
Tailwind 모드를 켜면 SVG to React 도구가 하드코딩된 fill="#hex"와 stroke="#hex" 속성을 fill="currentColor"와 stroke="currentColor"로 교체하고 루트 <svg> 요소에 className="fill-current"를 추가합니다. 아이콘이 부모의 text-color 클래스를 즉시 상속받아 다크 모드와 테마 전환을 원활하게 지원합니다.
아니요. 전체 SVG to React 변환이 브라우저의 JavaScript 엔진 내에서 처리됩니다. SVG 소스가 기기를 떠나지 않습니다. 백엔드 없음, 업로드 없음, 로깅 없음, 속도 제한 없음.
네, 매우 큰 SVG(수백 개의 경로)는 처리 시간이 약간 더 걸릴 수 있습니다. SVG to React 도구는 다중 경로 아이콘, 클리핑 경로, 그래디언트, 마스크 및 중첩 그룹을 지원합니다. 극도로 복잡한 일러스트의 경우 더 나은 React 렌더링 성능을 위해 더 작은 컴포넌트로 분리하는 것을 고려하세요.
100% 무료 · 가입 불필요 · 업로드 없음 · 오프라인 지원
