FE

[RN] - svg 사용법 with yarn

<ziny/> 2022. 7. 4. 19:21
728x90

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} />
728x90

'FE' 카테고리의 다른 글

TS & RN - props 타입 선언법  (0) 2022.07.06
[RN] - Image태그 사용 방법  (0) 2022.07.04
[RN] - 첫 세팅 이후 ~ 앱 실행  (0) 2022.06.22
[RN] - 현재 사용하고 있는 폴더구조  (0) 2022.06.22
[RN] - 권한 관련 처리  (0) 2022.06.21