개발자 도구 / 26
SVG를 React JSX / TSX로 변환하는 변환기
SVG 벡터 마크업을 깔끔한 컴포넌트 기반 React JSX 또는 TypeScript TSX 코드로 변환합니다.
SVG를 React JSX / TSX로 변환하는 변환기: TOEA는 SVG kebab-case 속성을 React camelCase로 변환하고, 인라인 스타일을 JS 객체로 변환한 다음 SVG 요소로 감쌉니다. 서버에 파일을 전혀 업로드하지 않고 브라우저에서 100% 로컬로 실행됩니다.
- 카테고리
- 개발자 도구
- 실행 횟수
- 브라우저에서
- 비용
- 무료 · 가입 불필요
- 사용 가능 여부
- 사용 가능
아이콘을 텍스트처럼 작동시키기
아이콘 구성 요소는 배치된 위치에서 색상과 크기를 가져올 때 재사용하기 가장 쉽습니다. 하드 코딩된 fill 또는 stroke 색상을 currentColor로 바꾸면 아이콘이 주변 텍스트 색상을 따르고, viewBox는 유지하면서 width와 height를 제거하면 CSS 또는 className으로 크기를 지정할 수 있습니다. 먼저 SVG 정리 도구로 파일을 처리하면 그렇지 않을 경우 번들에 들어갈 편집기 메타데이터가 제거됩니다.
ID, 스타일 및 접근성
그라디언트, 마스크, 클립 경로는 id로 참조합니다. 같은 구성 요소를 두 번 렌더링하면 페이지에 중복된 ID가 생겨 두 번째 복사본이 첫 번째 복사본의 그라디언트를 가리킬 수 있습니다. 아이콘에서 이러한 요소를 사용할 때는 React의 useId로 고유한 ID를 생성하십시오.
SVG 내부의 <style> 요소는 중괄호가 표현식으로 읽히므로 JSX를 깨뜨립니다. 해당 규칙을 속성이나 스타일시트로 옮기십시오. 장식용 아이콘에는 aria-hidden="true"를 추가하고, 의미를 전달하는 아이콘에는 role="img"와 <title>을 추가하십시오.
사용 방법
- 원시 SVG 마크업을 붙여넣습니다.
- 컴포넌트 이름, TypeScript 인터페이스, props 전달을 설정합니다.
- 바로 사용할 수 있는 React 컴포넌트 코드를 복사합니다.
개인정보 보호 및 제한사항
마크업 변환은 클라이언트 측 JavaScript 내부에서만 실행됩니다.
관련 도구
자주 묻는 질문
TypeScript를 지원하나요?
예. 완전한 타입이 적용된 React.FC<React.SVGProps<SVGSVGElement>> 컴포넌트를 생성합니다.
무료 도구 · 브라우저에서회 실행 · 계정 불필요