[FE] vite + react + typescript 환경에서 svg 불러오기

🌴 구현 환경

Vite + React + Typescript 환경에서 개발을 진행하다가 svg 파일로 아이콘을 불러오려고 했다.

😓 발생한 문제

평소처럼 ReactComponent 로 svg 파일을 불러와서 컴포넌트로서 사용하려고 했는데 오류가 발생하였다.

😱 오류는 항상 예상하지 못한 부분에서 발생한다..

🤔 해결 방안

찾아보니 vite-plugin-svgr 을 활용해서 svg 파일을 불러올 수 있었다.

1. 사용하는 패키지 매니저에 맞게 설치한 후,

# npm
npm i vite-plugin-svgr

# yarn
yarn add -D vite-plugin-svgr

# pnpm
pnpm add -D vite-plugin-svgr

2. vite.config.ts 에 위 플러그인을 설치해준다.

// vite.config.ts

import svgr from "vite-plugin-svgr";

export default {
  plugins: [svgr(), react()],
};

3. 플러그인을 인식시키기 위해서 vite-env.d.ts 에 아래 설정을 추가해주고,

//vite-env.d.ts

/// <reference types="vite/client" />
/// <reference types="vite-plugin-svgr/client" />

[참고] Vite 공식 문서 - client-types

4. tsconfig.json 에 types 와 include 를 추가해준다.

//tsconfig.json

{
  "compilerOptions": {
		/*svg*/
    "types": ["vite-plugin-svgr/client"]
  },
	"include": ["custom.d.ts"],
}

5. tsconfig.json 과 같은 위치인 루트 디렉토리에 새로운 파일 custom.d.ts (.d.ts 앞에는 자유) 를 만들고 아래 내용을 추가해준다.

// custom.d.ts

declare module '*.svg' {
  const content: React.FC<React.SVGProps<SVGElement>>
  export default content
}

6. 이제 svg 파일을 사용하고 싶은 곳에서 아래처럼 불러오고, 경로 뒤에 ?react를 붙여주면 컴포넌트처럼 사용이 가능해진다.

import FilledHome from '../assets/svgs/filledHome.svg?react';

export default function Component() {
  return <FilledHome />
}

[참고] Vite에서 svg를 ReactComponet로 가져오는 방법

📚 배운 내용

vite 공식 문서부터 github 내용들, 스택오버플로우 등 많이 찾아보고 적용했는데도 불구하고 아래처럼 계속 나오지 않는 문제가 있었다. 그래서 엄청 많이 찾아 본 결과 ?react 를 붙이는 방법으로 컴포넌트를 사용할 수 있게 되었다.

유난히 어려웠던 이유는 vite + react 인 경우에 대한 정보가 많았고, typescript 를 사용하면 또 다르게 적용해야하는 정보가 있어서 이를 모두 적용해야만 정상 작동해서 정보를 취합하는 과정이 오래걸렸던 것 같다.

게다가 계속해서 플러그인이 수정되는건지 가장 최근 자료를 참고했을 때 성공할 수 있었다. 이 글을 보고 오류를 해결하는 사람이 있다면 뿌듯할 것 같다.