SVG를 React로

SVG를 React, JSX 또는 TSX로 변환

SVG 파일을 JSX 마크업, TypeScript 또는 JavaScript의 즉시 가져올 수 있는 React 구성 요소 또는 SVG를 문자열로 내보내는 모듈로 변환합니다. 변환기는 JSX 속성을 수정하고, 인라인 스타일을 변환하고, viewBox를 유지하고, 일괄 다운로드를 지원합니다.

여기에 파일을 놓으세요

새 파일의 기본값을 편집하고 있습니다

출력

import, 컴포넌트, export까지 갖춘 완전한 모듈입니다.

모듈컴포넌트 이름

컴포넌트, 내보내는 상수, 생성되는 파일의 이름이 됩니다. 비워 두면 파일 이름을 PascalCase로 바꿔 씁니다.

언어

forwardRef

컴포넌트를 감싸 ref가 svg 요소에 닿게 합니다.

props 전개

React.SVGProps<SVGSVGElement>를 파일에서 온 속성 뒤에 루트 svg 요소로 펼칩니다.

export 방식

최적화SVG 최적화

출력을 생성하기 전에 안전한 최적화 프리셋을 실행합니다.

width와 height 제거

루트의 width와 height를 지워 컴포넌트 크기가 CSS나 넘겨받은 props로 정해지게 합니다. viewBox는 항상 유지됩니다.

스타일currentColor 사용

색을 지정한 fill과 stroke를 모두 바꿔 그림이 CSS color 속성을 따르게 합니다. fill="none"은 그대로 둡니다.

미리보기

원본 보기

미리보기가 없습니다. 파일을 추가하고 선택하면 결과가 표시됩니다.

아직 파일이 없습니다. 위에 파일을 놓거나 '파일 선택'을 누르세요.

SVG란?

SVG(Scalable Vector Graphics)는 XML을 기반으로 한 벡터 이미지 형식입니다. 픽셀 대신 도형, 패스, 채우기, 선을 수식으로 기술하기 때문에 어떤 크기로 렌더링해도 품질이 떨어지지 않습니다.

SVG는 웹 표준 벡터 형식입니다. 모든 최신 브라우저가 기본적으로 지원하며 CSS로 스타일을 지정하거나 JavaScript 또는 SMIL로 애니메이션을 적용할 수 있습니다. 로고, 아이콘, 일러스트레이션에는 대체로 효율적이지만 복잡한 SVG는 파일이 커질 수 있습니다.

SVG를 React로 변환해야 하는 경우

번들러마다 .svg 파일을 가져왔을 때 무엇을 돌려주는지가 다릅니다. 인라인된 마크업일 수도, URL일 수도, 알맞은 로더가 없으면 아무것도 아닐 수도 있습니다. 나머지 코드와 나란히 커밋해 두는 컴포넌트는 그 문제를 비켜 갑니다. 아이콘이 타입 검사를 받고 트리 셰이킹되며 다른 컴포넌트처럼 props를 받는 평범한 JSX가 되기 때문입니다. 변환은 JSX가 요구하지만 원본 SVG에는 없는 것도 함께 처리합니다. stroke-width는 strokeWidth가 되고, class는 className이 되고, xlink:href는 xlinkHref가 되며, 인라인 style 문자열은 객체가 됩니다. 'currentColor 사용'을 켜면 모든 fill과 stroke가 CSS color 속성을 따르므로, 컴포넌트 하나로 그 아이콘을 쓰는 모든 색을 감당할 수 있습니다.

SVG를 React로 온라인에서 변환하는 방법

1
SVG 파일을 끌어다 놓거나 '파일 선택'을 눌러 대기열에 추가합니다. 한 번에 최대 40개까지 가능합니다.
2
JSX, React Component, SVG 문자열 중에서 고르고 컴포넌트 이름, 언어, currentColor 사용 여부를 정하세요. 생성된 코드가 옵션을 바꾸는 대로 갱신됩니다.
3
미리보기에서 코드를 복사하거나, '모두 저장'을 누르면 SVG마다 파일 하나씩 내려받을 수 있습니다. 대기열에 여러 개가 있으면 하나의 ZIP이 됩니다.

개인정보: 파일은 브라우저를 벗어나지 않습니다

변환은 JavaScript 및 WebAssembly를 사용하여 브라우저에서 로컬로 실행됩니다. 파일 업로드나 서버측 변환이 없으므로 추가한 파일은 장치에 그대로 유지됩니다.

로컬 처리는 기밀 로고, 내부 문서 및 미공개 클라이언트 아트워크를 보호하는 데 도움이 됩니다. 페이지와 변환 코드는 사용하는 동안 캐시되므로 이미 연 도구는 네트워크 연결 없이도 계속 작동할 수 있습니다.

자주 묻는 질문

세 가지 출력은 무엇이 다른가요?

JSX는 이미 가지고 있는 컴포넌트 안에 붙여 넣을 svg 마크업만 줍니다. React Component는 import와 export까지 갖춘 완전한 모듈을 주므로 HomeIcon.tsx나 HomeIcon.jsx로 바로 저장할 수 있습니다. SVG 문자열(TypeScript)은 마크업을 그냥 문자열로 내보내는 .ts 모듈로, HTML이나 메일 템플릿처럼 React가 아닌 곳에 넣을 때 씁니다.

컴포넌트가 className이나 onClick 같은 props를 받나요?

네, 'props 전개'가 켜져 있는 동안에는 받습니다. 컴포넌트는 React.SVGProps<SVGSVGElement>를 받아 파일에서 온 속성 뒤에 루트 svg 요소로 펼치므로 className, style, onClick, width, aria-label이 모두 적용되고 파일에 있던 값을 덮어씁니다. forwardRef까지 켜면 ref가 svg 요소 자체에 닿습니다.

'currentColor 사용'은 무엇을 바꾸나요?

색을 지정한 fill과 stroke가 모두 currentColor로 바뀌므로, 그림은 CSS color 속성이 정해 주는 색으로 칠해지고 컴포넌트에 color="red"를 넘기는 것도 통합니다. fill="none"은 그대로 두어 '칠하지 않는다'는 뜻을 유지합니다. 여러 색이 든 일러스트는 켜는 순간 한 가지 색으로 뭉개지므로 기본값은 꺼짐입니다.