본문으로 건너뛰기
Numio

React Native 앱을 위한 SVG 변환 — Numio

SVG 마크업을 react-native-svg에서 Svg, Path, G 등의 요소를 가져오는 React Native 컴포넌트로 바꿉니다. 먼저 SVGO 최적화를 실행하고, 속성은 JSX prop이 되며 숫자 값은 숫자로 출력됩니다(strokeWidth={2}).

Figma나 Sketch에서 내보낸 아이콘을 react-native-svg를 쓰는 Expo 또는 React Native 앱용 컴포넌트로 변환할 때.

SVG

React Native

이럴 때 사용하세요

  • Figma나 Sketch에서 내보낸 아이콘을 react-native-svg를 쓰는 Expo 또는 React Native 앱용 컴포넌트로 변환할 때.
  • 네이티브 컴포넌트로 배포하기 전에 비대한 SVG(title, 편집기 메타데이터, 사용하지 않는 defs)를 줄일 때.

사용 방법

  1. SVG 편집기에 SVG 마크업을 붙여 넣거나 .svg 파일을 끌어다 놓습니다. 입력이 유효한 SVG가 아니면 "This is not a valid svg code."가 표시됩니다.
  2. SVGO 설정을 열어 최적화를 끄거나 remove title, remove view box, merge paths 같은 플러그인을 개별로 켜고 끕니다. 편집기 아래 미리 보기에서 원본 SVG와 최적화된 SVG를 비교할 수 있습니다.
  3. React Native 패널의 출력을 .js 또는 .tsx 파일에 복사하고 앱에 react-native-svg를 설치합니다.

SVG 마크업

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  <title>Check</title>
  <g fill="none" stroke="#16a34a" stroke-width="2">
    <circle cx="12" cy="12" r="10"/>
    <path d="M7 12.5l3 3 7-7"/>
  </g>
</svg>

React Native 컴포넌트(react-native-svg)

import * as React from "react"
import Svg, { G, Circle, Path } from "react-native-svg"
const SvgComponent = (props) => (
  <Svg
    xmlns="http://www.w3.org/2000/svg"
    width={24}
    height={24}
    viewBox="0 0 24 24"
    {...props}
  >
    <G fill="none" stroke="#16a34a" strokeWidth={2}>
      <Circle cx={12} cy={12} r={10} />
      <Path d="m7 12.5 3 3 7-7" />
    </G>
  </Svg>
)
export default SvgComponent

세부 정보 및 제한 사항

SVGO 최적화는 브라우저의 Web Worker에서 실행되지만 JSX 생성은 서버에서 이루어집니다. 최적화된 SVG가 /api/svg-to-jsx로 POST되고, 그곳에서 native: true로 SVGR을 실행합니다.

react-native-svg가 지원하지 않는 요소는 제거되고, SVGR이 /* SVGR has dropped some elements not supported by react-native-svg: filter */ 같은 주석을 추가합니다.

SVGO는 <style> 규칙을 인라인으로 넣은 뒤 스타일 선언을 속성으로 바꾸므로 style="stroke:blue"는 stroke="#00f"(stroke prop)가 됩니다. <title>은 기본으로 제거됩니다.

width, height, viewBox는 유지되고 루트 Svg에 {...props}가 펼쳐지므로 크기나 색을 덮어쓸 수 있습니다.

FAQ

출력에 react-native-svg가 필요한가요?

네. 컴포넌트가 react-native-svg에서 Svg와 Path, Circle, G 같은 요소 컴포넌트를 가져오므로 프로젝트에 설치되어 있어야 합니다. 일반 React Native View만으로는 동작하지 않습니다.

아이콘이 크기 조절되도록 viewBox를 유지할 수 있나요?

네. remove view box는 기본으로 꺼져 있어 viewBox가 Svg 요소에 남습니다. 컴포넌트를 쓸 때 width와 height prop을 넘기면 크기를 조절할 수 있습니다.

필터와 그라디언트는 어떻게 되나요?

filter처럼 react-native-svg에 대응 요소가 없는 요소는 삭제되고 파일 맨 위에 주석이 붙습니다. 사용하지 않는 그라디언트는 SVGO의 remove useless defs가 제거합니다.

SVG가 업로드되나요?

컴포넌트를 생성하기 위해 최적화된 SVG가 페이지의 /api/svg-to-jsx 엔드포인트로 전송됩니다. 최적화 단계와 미리 보기는 브라우저 안에서 처리됩니다.

사양 및 참고 자료