React Native 환경에서 svg 파일 불러오는 방법

서론

대상독자

RN 개발 시, svg 파일을 사용하고 싶은 개발자

학습목표

오늘은 RN Expo 환경에서 svg 파일을 불러오는 방법에 대해서 알아보겠습니다.

본론

 

react-native-svg와 react-native-svg-transformer 설치하기

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

react-native-svg와 react-native-svg-transformer란 라이브러리를 설치해줍니다.

 

metro.config.js 수정하기

그런 뒤, metro.config.js 파일에서 아래와 같이 설정해줍니다.

const { getDefaultConfig } = require("expo/metro-config");

module.exports = (() => {
  const config = getDefaultConfig(__dirname);

  const { transformer, resolver } = config;

  config.transformer = {
    ...transformer,
    babelTransformerPath: require.resolve("react-native-svg-transformer"),
  };
  config.resolver = {
    ...resolver,
    assetExts: resolver.assetExts.filter((ext) => ext !== "svg"),
    sourceExts: [...resolver.sourceExts, "svg"],
  };

  return config;
})();

 

type 정보 추가하기

기본적으로 .svg란 파일을 타입 체커가 인식하지 못하므로 타입 정보를 따로 추가해줘야 합니다. 아래와 같이 말이죠.

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

 

svg 파일 불러와 사용하기

마지막으로 svg 파일 불러와 리액트 컴포넌트 상에서 사용해보겠습니다. 아래처럼 사용하시면 됩니다. 

import GoogleLogo from "./assets/Icons/Login/Google.svg";
...
    return(
        <GoogleLogo />
    )
}