SVGをJSXに変換

SVGをReactコンポーネントに変換。classなどの属性も自動で修正します。

컴포넌트 이름

만들 파일

내보내기 방식

군더더기 정리 (주석, 메타데이터 등)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に変換とは？

使い方

使い方のコツ

あわせて見られているツール