[React] svg를 컴포넌트로 사용하기

작은 아이콘의 경우 SVG 파일을 사용해서 컴포넌트로 사용할 수 있다.

import { ReactComponent as Send } from "../../assets/images/send.svg";

그냥 일반적인 이미지 파일을 붙이는 것 처럼 <img src='~' />에서도 사용할 수 있지만 컴포넌트로 사용하게 되면 원하는 색깔, 크기로 다양한 형태의 아이콘을 생성할 수 있기 때문에 이렇게 사용하기로 결정했다.

하지만 이대로 사용하는 경우, '.svg' 파일 내부에 ReactComponent와 관련된 타입을 추론할 수 없다는 TS Error가 뜨는 걸 볼 수 있었다.

vite를 번들러로 사용하고 있는 프로젝트 환경에서 svgr 플러그인을 세팅하면 위 이슈를 해결할 수 있다고 하여 아래의 과정을 따라가서 문제를 해결할 수 있었다.

1. vite-plugin-svgr install

npm install -d vite-plugin-svgr

2. custom.d.ts 설정

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

3. vite.config.ts 설정

import svgr from 'vite-plugin-svgr';
...
plugins: [react(), svgr()],
...

추가) Webpack의 경우

CRA를 통해 프로젝트 세팅을 한 경우 webpack을 모듈 번들러로 사용하기 때문에
아래와 같이 custom.d.ts 파일과 tsconfig.json만 각각 아래처럼 수정해주면 된다.

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

// tsconfig.json
...
  "include": ["src", '(custom.d.ts 경로)/custom.d.ts'],
...

https://webpack.js.org/guides/typescript/#importing-other-assets