SVG ➔ React 변환기

복잡한 SVG 태그 속성을 React(JSX)가 인식할 수 있는 CamelCase로 1초 만에 일괄 변환해 줍니다.

컴포넌트 이름

TypeScript (TSX) 사용

색상을 currentColor로 치환

원본 SVG 코드 붙여넣기

IconComponent.tsx

import React, { SVGProps } from 'react';

export default function IconComponent(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
  <path d="M12 20h9" />
  <path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z" />
</svg>
  );
}