1. 문제상황

figma로 열심히 만든 내 앱 디자인을 이제 구현할 때가 되었다!
navigation 하는 버튼으로 대부분 아이콘을 썻는데, 해당 아이콘은 svg로 넣을려고 한다.
이전 프로젝트에서 png로 export해서 썼더니 픽셀단위라서 화질이 깨지는 문제가 있었다.

2. 해결방법

1. 라이브러리 설치

npm install react-native-svg
npm install --save-dev react-native-svg-transformer

2. metro.config.js 설정

const { getDefaultConfig, mergeConfig } = require("@react-native/metro-config");

const defaultConfig = getDefaultConfig(__dirname);
const { assetExts, sourceExts } = defaultConfig.resolver;

/**
 * Metro configuration
 * https://facebook.github.io/metro/docs/configuration
 *
 * @type {import('metro-config').MetroConfig}
 */
const config = {
  transformer: {
    babelTransformerPath: require.resolve("react-native-svg-transformer")
  },
  resolver: {
    assetExts: assetExts.filter((ext) => ext !== "svg"),
    sourceExts: [...sourceExts, "svg"]
  }
};

3. SVG 파일 사용하기

import React from 'react';
import { View } from 'react-native';
import SvgLogo from '../assets/icons/logo.svg'; // SVG 파일을 컴포넌트로 가져옴

const MyComponent = () => {
  return (
    <View>
      <SvgLogo width={100} height={100} /> {/* SVG 아이콘 사용 */}
    </View>
  );
};

export default MyComponent;

여기서 import에 문제가 생겼다.

'../assets/icons/back.svg' 모듈 또는 해당 형식 선언을 찾을 수 없습니다.ts(2307)

4. import 문제 해결하기

declarations.d.ts 파일 생성

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

TypeScript 설정 파일 수정

{
  "compilerOptions": {
    // 다른 설정들...
  },
  "include": [
    "src/**/*",
    "declarations.d.ts" // 또는 svg.d.ts
  ]
}

3.결과

다음과 같이 잘 나온다!