SVG React JSX 변환기

SVG React JSX 변환기는 원시 SVG 파일을 재사용 가능한 React 컴포넌트로 변환해 줍니다. 모든 SVG 속성을 수동으로 수정할 필요 없이 더 깔끔한 아이콘 컴포넌트, 브랜드 마크, 제품 일러스트레이션 및 디자인 시스템 에셋이 필요한 개발자를 위해 만들어졌습니다. SVG 마크업을 붙여넣거나 UTF-8 형식의 .svg 파일을 업로드하고, 필요한 React 옵션을 선택한 다음 생성된 컴포넌트를 프로젝트에 복사해 사용하세요.

사용 방법

1. SVG 붙여넣기 또는 업로드. 전체 SVG 파일을 에디터에 붙여넣거나 UTF-8 형식의 .svg 파일을 업로드합니다.
2. 컴포넌트 이름 지정. AlertIcon 또는 BrandMark와 같이 PascalCase 형태의 React 컴포넌트 이름을 입력합니다.
3. React 옵션 선택. TypeScript, forwardRef, React.memo, title 접근성, 스타일 변환, 새니타이징 및 prop 스프레드 옵션을 선택합니다.
4. JSX로 변환. 'React 컴포넌트로 변환'을 클릭하여 바로 복사 가능한 JSX 코드를 생성합니다.
5. 검토 및 복사. React 프로젝트에 복사하기 전에 변환 요약, 경고 및 생성된 코드를 검토합니다.

변환기 처리 사항

더 나은 React SVG 컴포넌트를 위한 팁

원래의 viewBox는 SVG가 확장되는 방식을 제어하므로 가능하면 그대로 유지하는 것이 좋습니다. 아이콘 시스템의 경우, width="1em" 및 height="1em" 설정을 사용하면 아이콘이 텍스트 크기를 상속받으면서도 호출자가 props를 통해 크기를 오버라이드할 수 있게 됩니다. 설명적인 PascalCase 컴포넌트 이름을 사용하고, 장식용 SVG는 적절한 경우 aria-hidden을 사용하여 접근성을 유지하며, 정보를 전달하는 의미 있는 아이콘에는 title prop을 사용하세요.

자주 묻는 질문 (FAQ)

이 SVG to React 변환기는 무엇을 변경하나요?

SVG XML을 파싱하고 className, camelCase로 변환된 SVG 속성, 선택적 스타일 객체, props, forwardRef, title 접근성 및 export 구문을 포함하여 React 친화적인 JSX로 SVG 속성을 재작성합니다.

Can I upload an SVG file?

네. UTF-8 형식의 .svg 파일을 업로드하거나 SVG 마크업을 붙여넣을 수 있습니다. 업로드된 파일은 텍스트로 읽혀 서버에서 JSX로 변환됩니다.

Does it sanitize SVG code?

새니타이징은 기본적으로 활성화되어 있습니다. 변환기는 스크립트 태그, 인라인 이벤트 핸들러 및 javascript: 링크를 제거하므로 생성된 컴포넌트를 사용하기 전에 더 안전하게 검토할 수 있습니다.

Why convert style attributes to objects?

React는 JSX를 작성할 때 style prop이 객체 형태이기를 기대합니다. 스타일 문자열을 객체로 변환하면 출력이 깔끔하게 컴파일되고 CSS 속성 이름이 camelCase로 유지됩니다.

What is the best component name format?

AlertIcon 또는 BrandMark와 같은 PascalCase를 사용하세요. 변환기는 잘못된 문자를 정리하고 결과물이 유효한 React 컴포넌트 식별자로 시작하도록 보장합니다.