[TS] TypeScript가 SVG 파일을 import 하지 못해서 에러가 발생할 때

TypeScript에서 svg 파일을 import 해오고자 할 때 svg에 대한 타입을 찾을 수 없으면 위와 같은 에러가 발생한다.

별도의 d.ts 파일을 만들어서 svg 파일에 대한 타입을 지정해주면 에러가 사라진다.

 

해결방안

// custom.d.ts

declare module '*.svg' {
  const content: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
  export default content;
}

 

이후 tsconfig.json 파일에서 아래와 같이 webpack 설정을 추가해준다. (어떤 파일들에 어떤 로더를 적용할지)

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

 

 

출처/참고

• https://tesseractjh.tistory.com/227
• https://stackoverflow.com/questions/44717164/unable-to-import-svg-files-in-typescript