[React] vite + ts에서 vite-plugin-svgr로 svg 사용 설정

사용해보게 된 동기

여태껏 svg 사용시 아래 두가지 방법으로 썼었다.
1. svg를 파일로 img 태그로 사용하기 (컬러 변경이 필요없을때)

<img src="... logo.svg" />

 

2. svg를 메모장에다 넣어가지구 <svg>...</svg> 코드 복사해서 컴포넌트에 직접 복붙하기(컬러 변경 필요시)

export default function UserIcon() {
  return (
    <S.Svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M11 0C4.928 0 0 4.928 0 11C0 17.072 4.928 22 11 22C17.072 22 22 17.072 22 11C22 4.928 17.072 0 11 0ZM11 3.3C12.826 3.3 14.3 4.774 14.3 6.6C14.3 8.426 12.826 9.9 11 9.9C9.174 9.9 7.7 8.426 7.7 6.6C7.7 4.774 9.174 3.3 11 3.3ZM11 18.92C8.25 18.92 5.819 17.512 4.4 15.378C4.433 13.189 8.8 11.99 11 11.99C13.189 11.99 17.567 13.189 17.6 15.378C16.181 17.512 13.75 18.92 11 18.92Z" />
    </S.Svg>
  )
}

 

팀프로젝트 중에 svg를 다른 방법으로 컴포넌트화 해서 쓸 수 있는 방법이 있는데,
우리 프로젝트가 vite에 ts를 사용하다보니 설정이 잘안된다고 나에게도 한 번 시도 해보라고 알려주셨는데
찾아보니 매우 괜찮아 보였다..! 이런것도 모르고 svg를 사용하고 있었다니..

 

기존 사용하던 방법 중

1번 방법은 svg 컬러 수정 등이 불편하고

2번 방법은 svg마다 컴포넌트를 만들어야하니 불편한데

svgr로 사용하는 방법은 사용이 간편했다.

svgr 사용시

import Logo from '@assets/logo.svg?react'

export default function Header() {
  // ...
  return (
    // ...
      <Logo />
  	// ...
  )
}

 

 

---

사용 설정

사실 vite-plugin-svgr사용법에 대해 블로그들이 알려주고 있는데..
한두개씩 누락된 글이라 여러 곳 돌아다니며 빠진 설정을 채워야했는데 여러 블로그들을 돌아다녀야해서.. 귀찮았따..

(솔직히 따라하는데 한참 안되서 라이브러리가 문제인지.. 바보개발자를 낚는 블로그인가? 라는 생각까지 들었는데ㅋㅋㅋㅋㅋㅋ.. 당연하겠지만 설정 하나라도 빠지면 사용이 안된다)

다음에도 사용시에 분명 찾아다닐텐데 정리해두면 편할거 같아서 저장!
이게 vite + ts + react에서 svgr 설정 최종이다!!

 

1.  svgr 설치.

yarn add -D vite-plugin-svgr

yarn안 쓰면 여기서 설치법 확인 👉 https://www.npmjs.com/package/vite-plugin-svgr

 

 

2. vite-env.d.ts 수정

// 해당 파일에 아래 코드를 추가해주기
/// <reference types="vite-plugin-svgr/client" />

 

 

3.  vite.config.ts 수정

// 상단에서 import 해주고
import svgr from 'vite-plugin-svgr'

// plugins에 svgr()을 추가해준다
  plugins: [svgr(), react()],

 

 

4.  tsconfig.json 수정

{
  "compilerOptions": {
    // ...
    // compilerOptions안에 아래 코드 추가
    "types": ["vite-plugin-svgr/client"],
    // ...
  },
  // include에 svg.d.ts 추가
  "include": ["svg.d.ts"],
}

 

 

5. svg.d.ts 파일 추가

// 루트에 svg.d.ts 파일 추가하고 안에 아래 코드 작성
declare module '*.svg' {
  const content: React.FC<React.SVGProps<SVGElement>>
  export default content
}

 

 

6. 이제 끝! 사용하기!
아래처럼 import 해서 화면에 svg가 잘 출력되는걸 확인하면 된다!

// import시 경로 뒤에 ?react 추가해주기
import Logo from '@assets/logo.svg?react'

export default function Header() {
  // ...
  return (
    // ...
      <Logo />
  	// ...
  )
}

 

 

 

 

참고 글 (아래 글들을 합친게 이 글입니다)

[React] vite + ts에서 svg component 사용하기

 

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