[React Native] SVG 이미지 불러오는 방법

Images - React Native를 보며 svg 파일을 불러오려고 했는데, 아무리 해도 이미지가 뜨지 않았다.

이상하다는 생각이 들어서 다시 서치해봤다가 이런 글을 보았다.

react-native에서는 추가 설정 없이는 로컬에 있는 svg 파일을 바로 불러올 수 없습니다:(.

• 출처: 블로그 - [React Native] SVG 이미지 로드 하기

---

SVG 이미지 불러오는 방법

React Native에서 svg 이미지를 불러오려면 react-native-svg 라이브러리를 사용해야한다.

1. react-native-svg 설치

yarn add react-native-svg

2. cd ios && pod install

나는 window를 사용하고 있으므로 이 단계는 생략했다.

3. react-native-svg-transformer설치

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

react-native-svg-transformer를 사용하면 SVG 파일을 React Native 프로젝트에 import 할 수 있다.

4. metro.config.js에서 설정

const { getDefaultConfig, mergeConfig } = require("@react-native/metro-config");

const defaultConfig = getDefaultConfig(__dirname);
const { assetExts, sourceExts } = defaultConfig.resolver;

/**
 * Metro configuration
 * https://facebook.github.io/metro/docs/configuration
 *
 * @type {import('metro-config').MetroConfig}
 */
const config = {
  transformer: {
    babelTransformerPath: require.resolve("react-native-svg-transformer")
  },
  resolver: {
    assetExts: assetExts.filter((ext) => ext !== "svg"),
    sourceExts: [...sourceExts, "svg"]
  }
};

module.exports = mergeConfig(defaultConfig, config);

5. TypeScript를 쓰고 있으므로 declarations.d.ts 생성 후 다음과 같이 설정

declare module "*.svg" {
  import React from "react";
  import { SvgProps } from "react-native-svg";
  const content: React.FC<SvgProps>;
  export default content;
}

6. svg 파일을 임포트해서 코드를 작성하면 끝!

import CalendarSvg from './assets/images/_ic_calendar_heart_filled.svg';

<CalendarSvg width={20} height={22}/>