CUDS_1) SVG typing in React_Typescript

참고 링크
https://blog.blakez.dev/create-svg-components-with-react-and-typescript/

original svg code

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>

to TS_React compatible code

import * as React from "react";

export const ArrowLeft = ({
  height = "24px",
  width = "24px",
  ...props
}: React.SVGProps<SVGSVGElement>) => (
  <svg 
  xmlns="http://www.w3.org/2000/svg" 
  width="24" 
  height="24" 
  viewBox="0 0 24 24" 
  fill="none" 
  stroke="currentColor" 
  stroke-width="2" 
  stroke-linecap="round" 
  stroke-linejoin="round" 
  className="feather feather-arrow-left"
  >
    <line x1="19" y1="12" x2="5" y2="12">
    </line>
    <polyline points="12 19 5 12 12 5">
    </polyline>
  </svg>
);

Import and Usage

import { ArrowLeft} from '../assets/arrow-left'

<ArrowLeft />