타입스크립트 상에서 svg 파일을 컴포넌트로서 import할 때 문제

문제

타입스크립트를 사용한 프로젝트 내에서 svg 파일을 컴포넌트로서 사용하기 위해 다음과 같이 코드를 작성하였다.

import { ReactComponent as ProfileIcon } from '/images/icon-profile.svg';

하지만 해당 코드에서 다음과 같은 에러가 발생하였다.

"*.svg"' 모듈에 내보낸 멤버 'ReactComponent'이(가) 없습니다.

 

문제 해결

스택오버플로우에서 나와 같은 문제를 발견하였고 해당 문제를 해결할 수 있었다.https://stackoverflow.com/questions/54121536/typescript-module-svg-has-no-exported-member-reactcomponent

TypeScript - Module '"*.svg"' has no exported member 'ReactComponent

custom.d.ts 파일을 생성해주고 해당 파일 내에서 모든 svg 파일에 대해 다음과 같이 속성을 설정해 주었다.

declare module '*.svg' {
    import React = require('react');
    export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
    const src: string;
    export default src;
  }

또한 ts 컴파일러가 ts|tsx 확장을 처리하도록 tsconfig.json에 custom.d.ts를 호출하도록 해주어 문제를 해결하였다. 

{
  "compilerOptions": {
  
  ( ... )
   
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    "next.config.js",
    "custom.d.ts",
    "styles",
    "pages",
    "public"
  ],
  
 ( ... )
}