SVG → React 컴포넌트
SVG를 붙여넣으면 바로 import할 수 있는 JSX 또는 TSX 컴포넌트가 나옵니다.
또는 파일을 끌어다 놓거나 아래에 코드를 붙여넣으세요
React 컴포넌트
출력이 여기에 표시됩니다
사용 방법
- 1SVG 코드를 붙여넣거나 .svg 파일을 끌어다 놓습니다.
- 2TypeScript 출력을 켜고 컴포넌트 이름을 정합니다.
- 3생성된 컴포넌트를 코드베이스에 복사합니다.
무료, 가입 불필요, 워터마크 없음 — 모든 처리가 브라우저에서 로컬로 이뤄지므로 파일이 기기를 벗어나지 않습니다.
자주 묻는 질문
정확히 무엇이 변환되나요?
속성은 camelCase로(stroke-width → strokeWidth), class는 className으로 바뀌고, 나머지 props는 루트로 전개되어 크기와 색을 그대로 넘길 수 있습니다.
SVG를 먼저 최적화해야 하나요?
네 — SVG 최적화 도구를 먼저 거치면 컴포넌트가 더 작고 깔끔해집니다. 두 도구는 클릭 한 번 거리입니다.