SVG 파일 사용하기

만약 잘사용하다가 아래 같은 이미지 에러가 생긴다면

svg 파일을 아이콘으로 사용하려고 import 하다가 발생한 에러다.

문자열로 줘야지 왜 숫자로 주냐라고 해당 컴포넌트를 확인해보라고 말하는데

 

나는 영어를 잘해서
좀더 상세히 알고 싶다면
아래 링크를 클릭해서 살펴보면 된다.

https://github.com/kristerkari/react-native-svg-transformer

GitHub - kristerkari/react-native-svg-transformer: Import SVG files in your React Native project the same way that you would in

 

나는 react-native cli만 사용하니 그것만 다루겠다.

 

1. 우선 2가지를 설치해야 한다.

yarn add react-native-svg

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

 

2. 프로젝트 루트 폴더에 metro.config.js 파일을 연다.

(파일이 없으면 만들면 된다.)

 

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'],
    },
  };
})();

 

2-1. 만약 0.56 또는 그보다 낮은 버전일 경우 추가로 한개지 더 해줘야 한다.

.svg file을 지원하지 않기때문에 .svgx 파일로 명시 해줘야 한다.

 

프로젝트 root에 rn-cli.config.js 를 찾는다 (없으면 만들면 된다.)

그리고 아래와 같이 수정한다.

 

module.exports = {
  getTransformModulePath() {
    return require.resolve("react-native-svg-transformer");
  },
  getSourceExts() {
    return ["js", "jsx", "svgx"];
  }
};

 

2-3 만약 타입 스크립트도 사용한다면

프로젝트 root에 declarations.d.ts 를 찾는다 (없으면 만들면 된다.)

그리고 아래와 같이 수정한다.

 

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

 

이렇게 설정 안하면 svg 파일 경로를 제대로 명시해줘도 찾을수 없다고 울고불고 난리 친다.

 

3. react-native 버전이 0.6보다 낮으면 react-native link react-native-svg

0.6 보다 높으면 npx pod-install ios 또는 cd ios && pod install

 

이 것 때문에 2시간 삽질…