[React + TypeScript] SVG 파일 사용 타입 에러

 

import { ReactComponent as Arrow } from './assets/icon/double-arrow.svg';

React + TypeScript 환경에서 svg 이미지 파일을 import 하면 아래와 같은 에러가 난다.

 

 

해결 방법

TypeScript가 해당 파일을 모듈로 인식하지 못하기 때문에 타입 선언 파일을 만들어준다.

 

- .d.ts는 declaration file(타입 선언 파일)로 TypeScript 프로젝트에서 타입 정보를 제공하는 용도로 사용된다.    - 컴파일러에게 해당 모듈이 어떻게 동작하는지 알려주는 역할을 한다.    - 보통 외부 라이브러리나 특정 파일 형식을 TypeScript가 이해할 수 있게 하거나,       타입 정보가 없는 파일을 사용할 때 .d.ts 파일을 만들어 해당 파일의 타입을 선언한다.

 

// custom.d.ts
declare module '*.svg' {
  export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
  const src: string;
  export default src;
}

 

- 모든 .svg 파일을 모듈로 간주

- SVG 파일을 React 컴포넌트처럼 사용할 수 있게 선언

- 기본적으로 SVG 파일의 경로를 string으로 내보냄

 

 

그다음 tsconfig.json의 include에 'custom.d.ts'를 추가해 준다.

 

// tsconfig.json
"include": ["src", "custom.d.ts"]