컴포넌트에 이 왜 없나요?

SVGO의 remove title이 기본으로 켜져 있습니다. 접근성을 위해 이 필요하면 설정에서 끄거나 최적화를 완전히 끄세요.

SVG를 JSX로 쉽게 변환

SVG 마크업을 React 함수 컴포넌트로 바꿉니다. SVGO가 브라우저에서 SVG를 최적화한 뒤 SVGR이 서버에서 변환합니다. 속성은 camelCase가 되고(stroke-width → strokeWidth), 숫자 크기는 숫자가 되며, 루트 <svg>에 {...props}가 전개됩니다.

Figma나 Illustrator에서 내보낸 아이콘을 React 컴포넌트로 만들 때.

SVG

SVGO optimization is turned on. You can turn it off or configure it in settings. SVG to JSX code is converted on the server.

Original

Result

JSX

이럴 때 사용하세요

Figma나 Illustrator에서 내보낸 아이콘을 React 컴포넌트로 만들 때.
빌드 파이프라인에 SVGR을 추가하기 전에 SVGR이 SVG를 어떻게 바꾸는지 확인할 때.

사용 방법

SVG 마크업을 붙여 넣거나 .svg 파일을 불러옵니다. 유효한 SVG가 아닌 입력은 오류와 함께 거부됩니다.
설정을 열어 SVGO 최적화를 끄거나 remove title, merge paths 같은 플러그인을 켜고 끕니다. 편집기 아래 미리보기에서 원본과 최적화된 SVG를 비교할 수 있습니다.
컴포넌트를 복사하고 SvgComponent 이름을 바꿉니다. className, width, fill은 props로 전달합니다.

SVG

<!-- Generator: Adobe Illustrator -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  <title>Minus</title>
  <path fill="none" stroke="currentColor" stroke-width="2.000" stroke-linecap="round" d="M5.000 12.000 L19.000 12.000"/>
</svg>

React 컴포넌트(JSX)

import * as React from "react"
const SvgComponent = (props) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width={24}
    height={24}
    viewBox="0 0 24 24"
    {...props}
  >
    <path
      fill="none"
      stroke="currentColor"
      strokeLinecap="round"
      strokeWidth={2}
      d="M5 12h14"
    />
  </svg>
)
export default SvgComponent

세부 정보 및 제한 사항

SVGO는 브라우저의 Web Worker에서 실행되고, 최적화된 SVG는 이 사이트의 /api/svg-to-jsx 엔드포인트로 전송되어 SVGR이 컴포넌트를 생성합니다. 기밀 아트워크는 붙여 넣지 마세요.

기본 설정에서는 주석, <title>, <desc>, 편집기 메타데이터가 제거되고 경로 데이터가 짧아집니다(M5.000 12.000 L19.000 12.000 → M5 12h14). 붙여 넣은 그대로 변환하려면 최적화를 끄세요.

style 문자열은 스타일 객체가 되고 class는 className이 됩니다.

출력은 React DOM용입니다. react-native-svg가 필요하면 SVG → React Native를 사용하세요.

FAQ

루트에 width와 height가 왜 남아 있나요?

SVGO 설정에서 remove dimensions가 꺼져 있고 SVGR은 기본 옵션을 사용하므로, 크기가 숫자로 유지됩니다(width={24}). {...props}가 그 뒤에 오므로 props로 덮어쓸 수 있습니다.

fill="currentColor"로 CSS에서 색을 지정할 수 있나요?

네. currentColor가 유지되므로 아이콘은 부모 요소의 CSS color를 따릅니다. 경로 안에 하드코딩된 색은 바뀌지 않습니다.

컴포넌트에 <title>이 왜 없나요?

SVGO의 remove title이 기본으로 켜져 있습니다. 접근성을 위해 <title>이 필요하면 설정에서 끄거나 최적화를 완전히 끄세요.

TypeScript로 출력할 수 있나요?

아니요. 이 페이지는 타입 주석이 없는 JavaScript 컴포넌트를 출력합니다.

사양 및 참고 자료

SVGR documentation

SVG