[React Native] 이미지를 .svg 파일로 적용하기

다양한 해상도의 기기들을 만족시키기 위해 여러 .png파일을 사용해도 되지만,

.svg파일 하나로 대응해보고자 한다(안드로이드에 .svg파일을 적용한 경험을 살려서!)

 

GitHub - react-native-svg/react-native-svg: SVG library for React Native, React Native Web, and plain React web projects.

 

문서의 간단 설명을 보면,

react-native-svg는 iOS와 Android에서 React Native에 대한 SVG를 지원하고 웹 호환성 계층을 제공한다고 되어있다

 

react native 버전도 많이(?) 올라 요새는 0.60+일테니,

GitHub - react-native-svg/react-native-svg: SVG library for React Native, React Native Web, and plain React web projects.

문서의 이 부분에서 설치하자

yarn add react-native-svg

cd ios && pod install && cd ..

 

그 다음에 우리는 svg 파일을 사용하는 부분만 확인하면 되니

GitHub - react-native-svg/react-native-svg: SVG library for React Native, React Native Web, and plain React web projects.

문서의 이 부분으로 이동하자

이동하면 첫 줄에,

react-native-svg-transformer를 사용하여 컴파일 시간 변환과 캐시된 변환을 가져오자고 한다

 

GitHub - kristerkari/react-native-svg-transformer: Import SVG files in your React Native project the same way that you would in

사이트로 이동하면 또 설명이 있고 뭔 뜻인가 보면,

react-native-svg-transformer를 사용하면 SVGR과 같은 라이브러리를 사용하여 가져온 SVG 이미지를 React 구성 요소로 변환할 때와 동일한 방식으로 React Native 프로젝트에서 SVG 파일을 가져올 수 있습니다. 이를 통해 React Native와 Web에 동일한 코드를 사용할 수 있습니다(라고 번역ㄷㄷ)

흠, 아무튼 그렇다고 하고

문서의 바로 아래 사용법과 설치방법이 있으니 설치를 해보자

yarn add --dev react-native-svg-transformer

 

설치가 되었으면 metro.config.js에 설정을 추가해줘야 한다

기존에 있던 내용을 포함하여 추가해주자

 

추가로 스크롤을 조금 더 내리면 TypeScript 관련 내용이 나온다

혹시 TypeScript를 사용중이라면 declarations.d.ts라는 파일을 만들라고 한다. (다만 root 폴더에는 넣지 말란다)

그래서 넣지 않았는데, 또 궁금해서 root에 넣어봤는데도 잘된다

하지만 문서에 괜히 적어놓은 건 아닐테니 root가 아닌 적당한 위치에 넣어놓으면 되겠다.

declarations.d.ts 파일을 만들고 안에 내용도 입력하고 적절하고 적당한 위치에 넣어 놨다면 이제 거의 다 왔다

 

2개의 문서 모두의 사용법에 나와 있는 것처럼 해보자. 아래는 문서의 예시를 참고하여 만들어 봤다

import Logo from './logo.svg'

function SVGComponent() {
  return (
    <Logo />
  )
}

export default SVGComponent

width, height를 넣어도 되지만, 넣지 않으면 디자이너가 만들어준 사이즈대로 나온다

 

 

끝.