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 转 JSX？

使用方法

使用技巧

相关工具