React Native에서 SVG 이미지 사용하기

// expo일 때
expo install react-native-svg

// expo가 아닐 때
npm i react-native-svg
cd ios
pod install

설치한 뒤 공통으로 종속성 하나를 더 설치한 뒤 metro.config.js를 수정한다.

npm i -D react-native-svg-transformer

const { getDefaultConfig } = require('expo/metro-config'); // expo일 때
const { getDefaultConfig } = require('metro-config'); // expo 아닐 때

module.exports = (async () => {
  const {
    resolver: { sourceExts, assetExts },
  } = await getDefaultConfig(__dirname);
  return {
    transformer: {
      babelTransformerPath: require.resolve('react-native-svg-transformer'),
    },
    resolver: {
      assetExts: assetExts.filter((ext) => ext !== 'svg'),
      sourceExts: [...sourceExts, 'svg'],
    },
  };
})();

여기에 TS를 이용중이라면 

React Native에서 이미지 import로 불러오기 :: Kir의 개발 낙서장 (tistory.com)

React Native에서 이미지 import로 불러오기

 

이 글을 참고하여 선언을 추가해준다.

 

이런 식으로 svg파일을 import해 이용할 수 있다.

import Logo from '@assets/logo.svg';

<Logo width={24} height={24} />

width, height 값은 필수 값은 아님.