SVG를 JSX로 변환
SVG 아이콘이나 HTML 조각을 JSX로 변환합니다 — 속성은 카멜케이스로, 인라인 스타일은 객체로, void 태그는 자동으로 닫고 원하면 컴포넌트로 감쌉니다.
.svg나 .html 파일을 입력 칸에 끌어다 놓아도 됩니다.
SVG 아이콘이나 HTML 조각을 붙여넣으면 속성이 JSX로 바뀝니다 (class → className, stroke-width → strokeWidth, xlink:href → xlinkHref). 인라인 스타일은 style 객체로, 빈 태그는 자동으로 닫힙니다. 텍스트 안의 중괄호와 부등호는 JSX가 코드로 읽기 때문에 문자 참조로 바뀝니다.
이 탭에서 그 도구를 열고, 위 옵션을 적용한 SVG를 파일로 넣어 둡니다. JSX가 아니라 그 그림입니다.
결과 4줄, 274자용도: React·Preact 컴포넌트의 return ( … ) 안, 마크업 자리에 붙여 넣는 JSX입니다. 이제 SVG가 아니어서 <img> 태그나 브라우저로는 열 수 없습니다. 그림이 필요하면 SVG 그대로 쓰세요.
SVG·HTML을 JSX로
Figma·일러스트레이터나 아이콘 세트에서 내보낸 SVG 아이콘, 또는 아무 HTML 조각을 붙여넣으면 React·Preact 컴포넌트에 바로 넣을 수 있는 JSX가 나옵니다. 모든 속성이 JSX 형식으로 바뀌고, 인라인 스타일은 style 객체가 되며, 빈 태그는 자동으로 닫힙니다. 모든 처리는 브라우저에서 이뤄집니다.
무엇이 바뀌나요
class→className,for→htmlForstroke-width→strokeWidth,stroke-linecap→strokeLinecap같은 하이픈 속성xlink:href→xlinkHref같은 네임스페이스 속성- 인라인
style문자열 → 키가 카멜케이스인style객체 - 빈 태그와
br·img·input같은 void 요소는 자동으로 닫힘 data-*·aria-*속성은 그대로 유지- 텍스트 안의
{·}·<·>는 JSX가 코드로 읽기 때문에 문자 참조({,<)로 바뀝니다
SVG to JSX · HTML to JSX
HTML→JSX도 완전히 같은 변환이라 아이콘뿐 아니라 폼·표 등 붙여넣은 어떤 HTML에도 적용됩니다. React 컴포넌트로 감싸기를 켜면 루트 요소에 props를 펼쳐 넣은, 바로 쓸 수 있는 default export 컴포넌트가 만들어집니다. TypeScript (.tsx, props 타입 포함)도 켜면 props 타입이 SVGProps<SVGSVGElement>로 붙고 .tsx 파일로 내려받습니다. 프레임워크를 Vue (단일 파일 컴포넌트, .vue)로 바꾸면 같은 입력이 Vue <template>로 나옵니다. 속성은 쓰인 그대로 두고(className·카멜케이스·style 객체 없음), currentColor, 먼저 정리하기, 너비와 높이 옵션은 그대로 적용되며, 컴포넌트 이름을 딴 .vue 파일로 내려받습니다.
내보낸 아이콘 다듬기
나머지 옵션은 바꾸기 전까지 꺼져 있거나 그대로입니다. currentColor 상자는 고정된 fill·stroke 색을 모두 currentColor로 바꿔 아이콘이 주변 글자색을 따르게 하며, none·url(#…)·var(…)는 그대로 둡니다. 먼저 정리하기는 편집기 메타데이터, 주석, 아무 데서도 참조하지 않는 id, 빈 그룹을 지우고 몇 바이트를 줄였는지 알려 줍니다. 너비와 높이에서는 크기를 없애 담는 상자에 맞춰 늘고 줄게 하거나 1em으로 글자 크기를 따르게 할 수 있고, viewBox가 없으면 너비와 높이로 만들어 넣습니다. 미리보기는 같은 옵션을 적용한 SVG를 브라우저가 그린 그대로 보여 주고, SVG 보내기는 그 SVG를 파일로 넣은 채 같은 탭에서 이미지 변환기(PNG·JPG·WebP)나 파일 → Base64(data URI)를 엽니다. 보내는 것은 JSX가 아니라 SVG 그림입니다. 설정은 모두 주소에 담겨 새로 고쳐도 유지되고, ‘링크 복사’로 만든 링크에는 붙여 넣은 마크업과 컴포넌트 이름까지 담기지만 주소 표시줄에는 나타나지 않습니다.
자주 묻는 질문
SVG를 React 컴포넌트로 어떻게 바꾸나요?
SVG를 붙여넣고 React 컴포넌트로 감싸기를 켠 뒤 결과를 복사하면 됩니다. 루트 svg에 props를 펼쳐 넣은 export default 함수가 나오므로 사용할 때 className·width·onClick 등을 그대로 넘길 수 있습니다.
SVG 말고 HTML에도 되나요?
네. HTML→JSX는 완전히 같은 변환이라 폼·표 등 어떤 HTML 조각도 똑같이 처리됩니다 (class → className, for → htmlFor, 인라인 스타일 → 객체).
인라인 스타일은 어떻게 되나요?
color:red;font-size:12px 같은 인라인 스타일 문자열이 fontSize처럼 카멜케이스 키를 가진 JSX style 객체로 바뀌며, 각 값은 문자열로 유지됩니다.
아이콘이 글자색과 글자 크기를 따르게 할 수 있나요?
네. currentColor 상자를 켜면 속성과 style 안의 고정된 fill·stroke 색이 모두 currentColor가 되고, none·url(#…)·var(…)·inherit·transparent는 그대로 둡니다. 너비와 높이를 1em (글자 크기를 따라감)으로 두면 아이콘이 글꼴 크기에 맞춰지고, 없애기 (담는 상자에 맞춰 늘고 줄어듦)를 고르면 CSS가 크기를 정합니다. SVG에 viewBox가 없으면 숫자로 된 너비와 높이로 먼저 만들어 넣고, 그마저 없으면 크기를 지우지 않고 그대로 둡니다.
컴포넌트에 ref를 넘기거나, title을 받거나, React Native용으로 만들 수 있나요?
네, React 컴포넌트로 감싸기를 켜면 됩니다. “루트로 ref 전달하기 (forwardRef)”와 “React.memo로 감싸기”는 내보내는 컴포넌트를 감싸고 필요한 react import를 한 줄로 붙입니다. title prop과 desc prop을 켜면 svg의 첫 자식으로 <title>이나 <desc>를 그리고 aria-labelledby·aria-describedby로 연결하며, 파일에 원래 있던 <title>은 prop의 기본값이 됩니다. “React Native (react-native-svg)”는 요소마다 react-native-svg 컴포넌트 이름으로 바꾸고 쓴 컴포넌트만 import하며, 빼야 했던 요소는 이름을 알려 줍니다.
Vue 컴포넌트로 받거나, 변환 전체를 링크로 넘길 수 있나요?
네. ‘프레임워크’를 ‘Vue (단일 파일 컴포넌트, .vue)’로 바꾸면 마크업이 <template> 안에 속성을 쓰인 그대로 담겨 나오고, 텍스트 안의 {{는 Vue가 식으로 읽지 않도록 문자 참조로 씁니다. currentColor, ‘먼저 정리하기’, ‘너비와 높이’는 그대로 적용되고 React 전용 옵션은 숨으며, 다운로드는 ‘컴포넌트 이름’을 딴 .vue 파일입니다. 설정은 모두 주소에 담기고, ‘링크 복사’로 만든 링크에는 붙여 넣은 마크업과 컴포넌트 이름까지 담기지만 주소 표시줄에는 나오지 않습니다.