[RN] - svg 사용법 with yarn

1. 패키지 설치

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

 

2. metro.config.js파일 수정

/* 기존 */
module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: true,
      },
    }),
  },
};


/* 수정 */
const { getDefaultConfig } = require("metro-config");

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

 

3. declarations.d.ts 파일 생성하기 (위치는 가장 밖) : 타입스크립트 사용자만

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

 

4. 다시 yarn run ios 하면 사용 가능

import People from "../assets/people.svg";

<People width={160} height={60} />