SVG 아이콘을 React 컴포넌트(JSX)로 변환
일반 HTML SVG 마크업 코드를 React에서 즉시 로드해 쓸 수 있는 확장형 JSX 컴포넌트 함수로 변환
일반 벡터 그래픽 SVG 코드를 복사해 넣으면, React/Next.js 프로젝트 내부로 곧바로 이식해 스타일링 및 Props 전달을 할 수 있는 타입스크립트 지원 리액트 컴포넌트(`export default function...`) 코드로 일괄 변환해 줍니다. 별도의 프로그램 설치나 복잡한 회원가입 없이 웹 브라우저에서 즉시 실행되며, 입력한 데이터는 외부 서버로 유출되지 않고 안전하게 로컬 환경에서 처리됩니다.
도구를 불러오는 중…
🔒 이 도구는 100% 브라우저에서 처리됩니다. 업로드한 파일과 입력한 내용은 서버로 전송되지 않습니다.
사용 방법
- 변환하고 싶은 원본 SVG 태그 코드를 복사하여 기입합니다.
- 생성할 리액트 컴포넌트의 클래스/함수 이름(예: HeartIcon)을 입력합니다.
- 변환하기 버튼을 누른 뒤, 생성된 파일 내부 코드 전체를 복사하여 React 컴포넌트 파일로 저장해 사용합니다.
자주 묻는 질문
- props가 전달되면 스타일을 외부에서 동적으로 변경할 수 있나요?
- 네, 변환된 컴포넌트는 `<svg {...props}>` 구조로 스프레드 연산자를 사용해 props를 넘기도록 설계되어 있어 외부 컴포넌트 호출 시 `className`, `fill`, `width`, `height` 등을 전달해 자유롭게 스타일을 컨트롤할 수 있습니다.
- class나 stroke-width 같은 원본 HTML 속성명은 자동으로 className, strokeWidth 같은 리액트 문법으로 바뀌나요?
- 네, 변환 과정에서 class는 className으로, stroke-width나 fill-rule처럼 하이픈이 들어간 SVG 속성명은 JSX 규칙에 맞게 카멜케이스(strokeWidth, fillRule)로 자동으로 바뀝니다. 그 외 style="color:red" 처럼 문자열로 된 인라인 스타일도 { color: 'red' } 형태의 객체 문법으로 함께 변환되므로 별도 수정 없이 바로 붙여 넣어 쓸 수 있습니다.
- class나 stroke-width 같은 원본 HTML 속성명은 자동으로 className, strokeWidth 같은 리액트 문법으로 바뀌나요?
- 네, 변환 과정에서 class는 className으로, stroke-width나 fill-rule처럼 하이픈이 들어간 SVG 속성명은 JSX 규칙에 맞게 카멜케이스(strokeWidth, fillRule)로 자동으로 바뀝니다. 그 외 style="color:red" 처럼 문자열로 된 인라인 스타일도 { color: 'red' } 형태의 객체 문법으로 함께 변환되므로 별도 수정 없이 바로 붙여 넣어 쓸 수 있습니다.