vite-plugin-svgr로 아이콘 화면에 보여주기

img 태그로 svg 아이콘을 화면에 보여준다면 여러 제약사항이 많다.

1. 색상이나 크기를 동적으로 변경이 어렵다.

2. 너비, 높이 외에는 속성을 변경할 수 없다.

 

따라서 다른 방법을 찾아야 했는데 지금 사용하는 vite의 vite-plugin-svgr를 사용하기로 결정했다.

 

svgr의 장점은 다음과 같다.

1. 색상, 크기를 동적으로 변경하기 쉽다.

2. react-icons 처럼 <GoogleIcon/> 으로 가져올 수 있어 가독성이 향상된다.

 

우선 설치한다.

npm install --save-dev vite-plugin-svgr

 

초기 설정해야하는 부분이 있는데

우선 vite 환경설정 파일인 vite.config.js에 svgr를 추가해준다.

// vite.config.js
import svgr from "vite-plugin-svgr";

export default {
  // ...
  plugins: [svgr()], // 옵션은 아래에서 설정
};

 

만약 타입스크립트를 사용한다면 "타입 추론을 위한 선언 헬퍼"를 제공하는데 vite-env.d.ts에 아래와 같이 작성한다. 

⭐ 타입스크립트를 사용하는 사람은 필수이니 꼭 까먹지 말기

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

 

svgr()함수의 옵션을 설정하기 위해 다시 vite.config.js 파일로 돌아와서 아래와 같이 추가한다.

// vite.config.js
import svgr from "vite-plugin-svgr";

export default {
  // ...
  plugins: [
  	svgr({
    		// A minimatch pattern, or array of patterns, which specifies the files in the build the plugin should include.
      		include: "**/*.svg?react"
    })
  ],
};

 

빌드 과정에서 svgr 플러그인이 포함해야하는 파일들의 패턴 또는 패턴배열을 등록하는 것이다.
- 빌드 도구가 소스 파일을 처리하면서 SVG 파일을 만난다.

- SVGR 플러그인이 작동하여 SVG 파일을 React 컴포넌트로 변환한다. ex) icon.svg -> Icon.jsx

 

이렇게 하면 초기설정이 끝난다.

 

사용할 때는 아래와 같이 사용하면 된다.

📦assets
 ┗ 📂images
 ┃ ┣ 📜googleIcon.svg
 ┃ ┣ 📜kakaoIcon.svg
 ┃ ┗ 📜naverIcon.svg

import NaverSVG from "@/assets/images/naverIcon.svg?react";

<NaverSVG/>

 

마치 react-icons를 사용할 때와 같은 모양으로 사용할 수 있어서 편리하다!

 

참고

https://www.npmjs.com/package/vite-plugin-svgr