SVG 아이콘을 React 컴포넌트(JSX)로 변환
일반 HTML SVG 마크업 코드를 React에서 즉시 로드해 쓸 수 있는 확장형 JSX 컴포넌트 함수로 변환
도구를 불러오는 중…
🔒 이 도구는 100% 브라우저에서 처리됩니다. 업로드한 파일과 입력한 내용은 서버로 전송되지 않습니다.
일반 벡터 그래픽 SVG 코드를 복사해 넣으면, React/Next.js 프로젝트 내부로 곧바로 이식해 스타일링 및 Props 전달을 할 수 있는 타입스크립트 지원 리액트 컴포넌트(`export default function...`) 코드로 일괄 변환해 줍니다.
사용 방법
- 변환하고 싶은 원본 SVG 태그 코드를 복사하여 기입합니다.
- 생성할 리액트 컴포넌트의 클래스/함수 이름(예: HeartIcon)을 입력합니다.
- 변환하기 버튼을 누른 뒤, 생성된 파일 내부 코드 전체를 복사하여 React 컴포넌트 파일로 저장해 사용합니다.
자주 묻는 질문
- props가 전달되면 스타일을 외부에서 동적으로 변경할 수 있나요?
- 네, 변환된 컴포넌트는 `<svg {...props}>` 구조로 스프레드 연산자를 사용해 props를 넘기도록 설계되어 있어 외부 컴포넌트 호출 시 `className`, `fill`, `width`, `height` 등을 전달해 자유롭게 스타일을 컨트롤할 수 있습니다.