이 도구에 대하여
SVG를 JSX 컴포넌트로 변환 도구는 원시 SVG 마크업을 깔끔한 React 컴포넌트로 변환합니다. SVGR이 하는 방식과 같지만 완전히 브라우저에서 이루어지며 아무것도 업로드되지 않습니다. 디자인 도구에서 익스포트한 아이콘을 붙여넣으면 import하여 스타일링할 수 있는 컴포넌트를 얻습니다. DOMParser로 SVG를 파싱하고 마크업이 잘못되면 명확한 오류를 보고합니다.
하이픈이 있거나 네임스페이스가 있는 모든 SVG 속성은 React 이름으로 camelCase 됩니다. stroke-width는 strokeWidth, fill-rule은 fillRule, clip-path는 clipPath, stop-color는 stopColor, xlink:href는 xlinkHref, xmlns:xlink는 xmlnsXlink가 되며 data-*와 aria-* 속성은 그대로 둡니다. 인라인 style 문자열은 style 객체가 되고, path와 circle 같은 빈 요소는 자체 닫히며, props가 루트 <svg {...props}>에 스프레드되어 컴포넌트가 구성 가능한 상태로 유지됩니다. 선택 토글로 하드코딩된 fill과 stroke 값을 currentColor로 바꾸고(아이콘이 텍스트 색을 상속하도록), width와 height를 제거하여 컨테이너에 맞게 크기가 조정되게 하고, 컴포넌트를 forwardRef로 감싸 기본 <svg> 노드를 노출할 수 있습니다.
JavaScript 또는 TypeScript 출력을 선택하세요. TypeScript 변형은 props를 React.SVGProps<SVGSVGElement>로 타이핑하며, forwardRef를 켜면 forwardRef<SVGSVGElement, React.SVGProps<SVGSVGElement>>를 사용합니다. 컴포넌트는 선택한 이름과 들여쓰기로 export된 화살표 함수(export const Icon = (props) => (...))로 출력되어 아이콘 모듈에 붙여넣을 준비가 됩니다.