SVG를 JSX로 변환

SVG 코드를 React 컴포넌트로 바꿔요. class, stroke-width 같은 속성도 알아서 고쳐요.

컴포넌트 이름

만들 파일

내보내기 방식

군더더기 정리 (주석, 메타데이터 등)props 전달 (크기, 색 바꾸기)색을 currentColor 로 바꾸기forwardRef 사용

SVG

TSX

import type { SVGProps } from "react";

export default function CheckIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className="icon">
      <path d="M5 12l5 5L20 7" stroke="#16a34a" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ opacity: 0.9 }}/>
    </svg>
  );
}

미리보기

모든 처리는 이 브라우저 안에서만 일어나요. SVG는 업로드되지 않아요.

SVG → JSX란?

SVG 코드를 React에서 바로 쓸 수 있는 JSX로 바꿔 주는 도구예요. class를 className으로, 속성을 camelCase로 바꿔 줘요.

사용 방법

SVG 코드를 붙여 넣습니다.

변환을 누릅니다.

컴포넌트 코드를 복사합니다.

사용 팁

색을 props로 바꾸고 싶으면 fill 값을 currentColor로 바꿔 두세요.

SVG를 JSX로 변환

SVG → JSX란?

사용 방법

사용 팁

함께 본 도구