SVG 마크업을 붙여넣으면 React 컴포넌트에 바로 쓸 수 있는 JSX로 변환합니다. 속성을 camelCase로 바꾸고(class→className), style 문자열을 객체로 변환하며, 주석과 DOCTYPE를 제거합니다.
React(JSX)는 HTML/SVG와 문법이 조금 다릅니다. 하이픈이 들어간 속성(stroke-width)은 camelCase(strokeWidth)로, class는 className으로 써야 하고, style은 문자열이 아니라 자바스크립트 객체여야 합니다. 이 도구는 그런 차이를 자동으로 변환해, 디자이너가 내보낸 SVG 아이콘을 곧바로 React 컴포넌트에 붙여 넣을 수 있게 해 줍니다.
class→className, for→htmlFor로 매핑하고, stroke-width·fill-opacity 같은 하이픈 속성을 camelCase로 바꿉니다. xlink:href처럼 네임스페이스가 있는 속성은 xlinkHref로 변환하고, data-·aria- 속성은 그대로 둡니다. style="fill:red;stroke-linecap:round"는 style={{ fill: 'red', strokeLinecap: 'round' }} 객체로 변환하며, 주석·DOCTYPE·XML 선언은 제거합니다.
이 도구는 정규식이 아니라 브라우저의 DOMParser로 SVG를 실제 파싱한 뒤 재직렬화하므로, 중첩 구조와 속성을 정확히 다룹니다. 모든 처리는 브라우저 안에서만 이뤄지며 코드가 서버로 전송되지 않습니다. 변환 결과를 컴포넌트에 넣은 뒤에는 width/height를 props로 빼거나 fill="currentColor"로 바꾸는 등 필요에 맞게 다듬으세요.