SVG JSX 변환기
SVG를 붙여넣으면 프로젝트에 바로 복사할 수 있는 깔끔한 React, React Native, Vue, Svelte 컴포넌트를 얻을 수 있습니다.
- 업로드 없음
- 오프라인 지원
- 무료, 가입 불필요
- 파일이 브라우저 밖으로 나가지 않습니다
여기에 SVG 파일을 놓으세요
또는 편집기에 SVG 코드를 붙여넣으세요. 여러 파일을 한 번에 열 수 있습니다.
SVG는 이 기기에만 머뭅니다. 아무것도 업로드되지 않습니다.
SVG JSX 변환기 사용 방법
- 1
SVG 붙여넣기
SVG 코드를 붙여넣거나 파일을 놓으세요. 최적화 탭에서 먼저 최적화하면 컴포넌트가 가장 작아집니다.
- 2
프레임워크 선택
React(JSX 또는 TSX), React Native, Vue, Svelte 중에서 고르고 컴포넌트 이름과 currentColor 같은 옵션을 설정하세요.
- 3
복사 또는 다운로드
컴포넌트를 복사하거나 바로 쓸 수 있는 .jsx, .tsx, .vue, .svelte 파일로 다운로드하세요.
React에서 쓰기 전에 SVG를 변환해야 하는 이유
JSX는 HTML처럼 보이지만 JavaScript 규칙을 따릅니다. SVG를 그대로 React 컴포넌트에 붙여넣으면 오류나 경고가 나는 경우가 많습니다. stroke-width나 fill-rule 같은 하이픈 속성은 camelCase로, class는 className으로, 인라인 style 문자열은 객체로 바꿔야 하기 때문입니다. xlink:href 같은 네임스페이스 속성과 Illustrator나 Sketch의 메타데이터도 정리해야 합니다.
viewsvg가 이 모든 것을 처리하고, props를 받는 이름 있는 컴포넌트로 감싸 주므로 부모에서 className, width, aria-label을 전달할 수 있습니다.
SVG 아이콘 컴포넌트 팁
- 먼저 최적화 도구로 메타데이터를 제거하고 패스를 줄이세요.
- currentColor 사용을 켜면 아이콘이 글자 색을 따르므로 라이트·다크 테마 모두에서 쓸 수 있습니다.
- width/height 제거를 켜고 CSS로 크기를 지정하면 같은 컴포넌트를 어떤 크기로든 쓸 수 있습니다.
viewBox는 남겨 두세요. 없으면 아이콘 크기를 조절할 수 없습니다.
SVG 작업에 필요한 모든 기능
SVG JSX 변환기는 SVG 파일을 보고, 편집하고, 최적화하고, 변환하는 하나의 작업 공간에 포함되어 있습니다. 가입, 광고, 업로드가 없습니다.
즉시 미리보기
최대 6400%까지 확대, 이동, 화면에 맞추기, 투명·흰색·검은색 또는 원하는 배경에서 SVG를 확인하세요.
실시간 코드 편집기
구문 강조, 오류 줄 표시, 정리 및 압축, 검색, 전체 실행 취소 기록.
윤곽선 및 픽셀 격자
윤곽선 모드로 모든 패스를 보고, 확대했을 때 격자로 픽셀 정렬을 확인하세요.
정보 확인
파일 크기와 gzip 크기, viewBox, 마우스를 올리면 강조되는 요소 트리, 클릭 한 번으로 색상 바꾸기.
SVGO로 최적화
전후 미리보기와 조절 가능한 정밀도로 파일을 줄이세요. 열린 모든 파일을 한 번에 최적화할 수 있습니다.
PNG, JPG, WebP, ICO
최대 16384px까지 원하는 크기로 투명도를 유지한 채 내보내거나, PNG를 클립보드에 바로 복사하세요.
React, Vue, Svelte
currentColor와 props를 지원하는 깔끔한 JSX/TSX, React Native, Vue, Svelte 컴포넌트.
여러 파일을 한 번에
여러 SVG를 탭으로 열고 일괄 최적화하거나 SVG 또는 PNG를 ZIP으로 다운로드하세요.
프라이빗 & 오프라인
업로드도 계정도 없습니다. 작업 내용은 브라우저에 저장되며, 첫 방문 후에는 오프라인에서도 작동합니다.
자주 묻는 질문
SVG를 JSX로 변환하면 무엇이 바뀌나요?
속성이 camelCase가 되고(stroke-width → strokeWidth), class는 className, xlink:href는 xlinkHref가 되며, 인라인 style 문자열은 style 객체로 바뀝니다. viewsvg가 모두 자동으로 처리합니다.
React에서 SVG 아이콘이 글자 색을 따르게 하려면?
'currentColor 사용'을 켜세요. 모든 fill과 stroke가 currentColor로 바뀌어 아이콘이 부모 요소의 CSS 색상을 따릅니다.
React Native를 지원하나요?
네. React Native를 선택하면 react-native-svg(Svg, Path, G 등)를 사용하는 컴포넌트가 해당 import 줄과 함께 생성됩니다.
SVG 파일이 어딘가에 업로드되나요?
아니요. viewsvg는 전부 브라우저에서 실행됩니다. 파일을 읽고, 표시하고, 최적화하고, 변환하는 작업이 모두 기기에서 이루어지며 서버로 아무것도 전송되지 않습니다. 첫 방문 후에는 오프라인에서도 작동합니다.
viewsvg는 무료인가요?
네. 모든 기능이 무료이며 가입, 워터마크, 파일 개수 제한이 없습니다.