Svg을 Jsx로 변환
무료 온라인 서비스 Svg을 Jsx로 변환 설치가 필요 없는 도구
SVG to JSX 변환기 소개
원시 SVG 마크업을 바로 붙여넣을 수 있는 React 컴포넌트로 변환합니다. SVG 속성을 React 호환 카멜 케이스 props로 다시 작성하고(class를 className으로, stroke-width를 strokeWidth로, xlink:href를 xlinkHref로 등), 인라인 스타일 문자열을 React 스타일 객체로 변환하며, 빈 요소와 SVG 도형 요소를 자기 닫기 형식으로 만들고, 기본 xmlns="http://www.w3.org/2000/svg" 네임스페이스를 제거합니다.
사용 방법
1. SVG 마크업(반드시 <svg>와 </svg>를 포함해야 함)을 입력 상자에 붙여넣습니다 2. Prettify를 클릭하여 변환 전에 마크업을 자동으로 들여쓰기합니다(선택 사항) 3. 컴포넌트 이름을 설정합니다(기본값은 SvgComponent, 영숫자와 밑줄만 허용) 4. 필요에 따라 "use client" 지시문 및/또는 useMemo 훅을 활성화합니다 5. Convert를 클릭하여 JSX 컴포넌트를 생성하고 클립보드에 복사합니다
컴포넌트 출력 옵션
컴포넌트 이름 필드는 내보내는 식별자를 제어합니다. "use client" 확인란을 활성화하면 출력은 별도의 줄에 "use client"로 시작하며 props가 없는 기본 내보내기로 내보내집니다. 그렇지 않으면 props를 받아 svg를 반환하는 명명된 const로 내보내집니다. useMemo를 활성화하면 SVG 마크업이 useMemo(() => (...), [])로 감싸집니다. 입력에는 <svg와 </svg>가 모두 포함되어야 하며, 그렇지 않으면 잘못된 SVG 오류와 함께 거부됩니다.
▶어떤 SVG 속성이 자동으로 변환되나요?
▶Prettify는 무엇을 하나요?
▶xmlns 속성이 제거되는 이유는 무엇인가요?
▶Next.js 클라이언트 컴포넌트를 만들 수 있나요?
이 도구가 당신에게 도움이 되었다면, 저에게 커피 한 잔 사주세요.
제게 커피 한 잔 사주세요.