SVG를 JSX로 변환

SVG 아이콘이나 HTML 조각을 JSX로 변환 — 속성을 카멜케이스로(class → className, stroke-width → strokeWidth), 인라인 스타일은 style 객체로, void 태그는 닫고, 원하면 React 컴포넌트로 감쌉니다. 100% 브라우저 처리.

SVG·HTML을 JSX로

Figma·일러스트레이터나 아이콘 세트에서 내보낸 SVG 아이콘, 또는 아무 HTML 조각을 붙여넣으면 React·Preact 컴포넌트에 바로 넣을 수 있는 JSX가 나옵니다. 모든 속성이 JSX 형식으로 바뀌고, 인라인 스타일은 style 객체가 되며, 빈 태그는 자동으로 닫힙니다. 모든 처리는 브라우저에서 이뤄집니다.

무엇이 바뀌나요

class → className, for → htmlFor
stroke-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 컴포넌트가 만들어집니다.

자주 묻는 질문

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 객체로 바뀌며, 각 값은 문자열로 유지됩니다.