SVG to JSX 변환기 - SVG를 리액트 컴포넌트로 변환 온라인

SVG 마크업을 React JSX, TSX, React Native 컴포넌트로 즉시 변환. SVG 속성 최적화, 복사 가능한 React 코드 생성.

SVG 입력

출력

자주 묻는 질문

SVG to JSX 변환기란 무엇인가요?

SVG to JSX 변환기는 표준 SVG 마크업을 React 애플리케이션에서 사용할 수 있는 JSX 문법으로 변환합니다. 'class'를 'className'으로 변환하고, 하이픈으로 연결된 속성을 camelCase로 변경하며(예: 'stroke-width'를 'strokeWidth'로), 인라인 스타일을 JavaScript 객체로 변환합니다.

React에서 SVG를 JSX로 변환해야 하는 이유는 무엇인가요?

React는 표준 HTML과 다른 문법 요구사항을 가진 JSX를 사용합니다. 'class'와 'stroke-width' 같은 SVG 속성은 'className'과 'strokeWidth'로 변환해야 합니다. 인라인 스타일도 JavaScript 객체가 되어야 합니다. 변환 없이는 React에서 경고나 오류가 발생합니다.

SVG를 JSX로 어떻게 변환하나요?

입력 필드에 SVG 코드를 붙여넣거나 SVG 파일을 드래그 앤 드롭하세요. 변환기가 자동으로 유효한 JSX로 변환합니다. 그런 다음 출력을 React 컴포넌트에 직접 복사할 수 있습니다. 선택적으로 '컴포넌트로 감싸기'를 활성화하면 완전한 React 컴포넌트를 생성할 수 있습니다.

SVG 최적화는 무엇을 하나요?

SVG 최적화는 SVG 파일에서 불필요한 데이터를 제거합니다. 여기에는 에디터 메타데이터(Illustrator, Figma, Sketch 등), XML 선언, 주석, 빈 속성이 포함됩니다. 이를 통해 SVG의 외관에 영향을 주지 않으면서 파일 크기를 줄입니다.

내 SVG 데이터는 안전한가요?

네, 절대적으로 안전합니다. 이 도구는 브라우저에서 모든 것을 처리합니다 - SVG 코드가 컴퓨터를 떠나지 않습니다. 서버 업로드, 데이터 수집, 외부 API 호출이 없습니다. 따라서 독점 아이콘과 민감한 디자인 자산에도 안전하게 사용할 수 있습니다.

React Native용 SVG를 변환할 수 있나요?

네! 'React Native' 탭을 선택하면 react-native-svg 라이브러리와 호환되는 코드를 생성합니다. SVG 태그를 React Native 등가물로 변환하고(예: 'svg'가 'Svg'로, 'path'가 'Path'로) 속성도 그에 맞게 조정합니다.

TypeScript를 지원하나요?

네. 'TSX' 탭을 선택하면 TypeScript 인터페이스가 포함된 적절한 타입의 React 컴포넌트를 생성합니다. 생성된 컴포넌트에는 적절한 FC(Function Component) 선언과 prop 타입이 포함됩니다.

코드 예제

// SVG to JSX attribute conversion
const svgAttrToJsx = {
  'class': 'className',
  'stroke-width': 'strokeWidth',
  'fill-rule': 'fillRule',
  'clip-path': 'clipPath',
};

// Convert hyphenated to camelCase
const toCamelCase = (str) =>
  str.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());

// Example usage
const attr = 'stroke-width';
const jsxAttr = svgAttrToJsx[attr] || toCamelCase(attr);
console.log(jsxAttr); // 'strokeWidth'