React에서 SVG 사용하기 (Typescript)

웹 개발을 하다보면 svg를 사용할 때가 많다.

리액트는 컴포넌트 단위로 개발하다보니 svg element tag를 복사해서 붙여넣기 하기엔 코드가 너무 복잡해 보인다.

이를 해결하기 위해 각각의 svg 파일을 만들어 컴포넌트로 만들어 쓰는 방법이 있다.

 

svg 파일들은 src 폴더 안에 assets 폴더를 만들어서 그 안에 모두 넣어두었다.

컴포넌트로 만들어 사용하기 위해서 이렇게 작성하면 된다.

// App.tsx
import { ReactComponent as AddIcon } from './assets/add.svg';

export default App() {
  return (
    <AddIcon />
  );
}

이렇게만 사용한다면 타입스크립트에서 해당 모듈을 찾지 못하는 오류가 발생한다.

 

typescript 컴파일러에세 변수, 함수를 인식시켜줄 파일을 루트 영역에서 하나 만들자.

 

custom.d.ts

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

그리고 tsconfig.json에 해당 파일을 추가한다는 내용을 넣는다.

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