svg 파일 다루기

export {default as Faq} from './faq.svg';

import Faq from '..'

<Faq /> // 컴포넌트 처럼 사용 가능

설정

react-native-svg 설치

pod install

React Native 0.60 이하의 버전인 경우

react-native link react-native-svg

react-native-svg-transformer 설치

metro.config.js 설정 변경

// 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"]
    }
  };
})();

src/custom.d.ts

// custom.d.ts

// declare는 컴파일러에게 변수나 함수가 존재한다고 인식하게 하는 것
// 타입스크립트에서 문자열로 모듈을 지정해줄 경우 외부모듈로 인식한다.
// 독립성을 가지는 모듈로 만들어 주는 듯 하다.

// .svg 확장자의 파일에서 ReactComponent의 존재를 인식시켜 주는 부분
declare module '*.svg' {
	import React = require('react');

	export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
	const src: string;
	export default src;
}