Tool Hub

SVG to Code

SVG 마크업 → HTML / JSX / Vue SFC 코드 변환

SVG 마크업을 붙여넣고 깔끔한 HTML, JSX, Vue 코드로 변환합니다. 속성명 자동 변환(예: JSX의 class → className)을 처리합니다.

사용 방법

  1. 출력 모드를 선택하세요: HTML, JSX(React) 또는 Vue Template.
  2. SVG 마크업을 입력 필드에 붙여넣으세요.
  3. 출력 상자에서 변환된 코드를 읽으세요. JSX 모드는 class를 className으로 이름을 바꾸고 kebab-case 속성을 camelCase로 변환합니다.
  4. 복사 버튼으로 출력을 복사하세요.
  5. 라이브 SVG 미리보기 아래에서 그래픽이 올바르게 보이는지 확인하세요.

예제

  • class="icon"과 stroke-width="2"가 있는 SVG를 JSX 모드에서 붙여넣으면 className="icon"과 strokeWidth="2"가 출력됩니다.
  • 같은 입력을 Vue Template 모드로 전환하면 class=를 :class=로 교체하면서 다른 모든 속성은 그대로 둡니다.

프로덕션 사용 전 출력을 검증하십시오. 보증 없음 — 자세한 내용은 이용약관.