vite 환경에서 svg 사용하기 (feat.vite-plugin-svgr)

😵 들어가며

과제를 하는데 아이콘 라이브러리를 설치하기엔 내가 필요한 아이콘은 5개 남짓이라, svg를 사용하는게 더 효율적일 것 같았다. 기존 webpack 환경의 리액트에서 사용하던 방식처럼 svg를 리액트노드 형식으로 바로 사용할 수 있을 것 같아 vite에서의 사용법을 서치하였다. 그리고 vite-plugin-svgr 라는 플러그인을 찾았는데,,,, 쉽지않네..?

구글링한 블로그 글을 아무리 따라해도 왜 난 에러가..?나지..? 근데 블로그 글들에 버전에 새로운 버전에서 이렇게 하면 되더라 얘기가 자꾸 중복되어 버전이 달라 그런건가? 해서 공식문서를 찾아보았다.. 그렇게 나는 또 한번 깨달았다,,! 역시 공식 문서를 먼저 보아야 한다는 것을… 버젓이 정답이 있는데 돌고 돌았다.. 무튼 큰 깨달음과 함께 찾아온 vite 환경에서 vite-plugin-svgr 4.3.0 버전 사용기

++ 그러니 일단 공식문서 공식문서 참고하시라,,,

사용 방법

라이브러리 설치

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

# yarn
yarn add -D vite-plugin-svgr

config 설정 vite.config.js(ts) 파일에 아래의 설정을 추가해준다,

import svgr from "vite-plugin-svgr";

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

타입스크립트 설정 대부분은 타입스크립트를 사용하고 있을텐데 아래의 구문을 꼭 추가해줘야 한다. 3번 과정 없이 4번을 가면 아래의 에러가 나올 것 이다.

이 구문 추가 안해서 안되는지도 모르고 왜 안되지 10번 함,,

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

리액트노드로 불러오기

import Loading from '../icons/svg/loading.svg?react';

사용하기. 끝

<Loading />

사용기

매우 잘된다능! 다음 글은 이렇게 만들어진 아이콘을 컴포넌트 Icon 컴포넌트 하나로 관리했던 법을 정리해보도록 하게따!🤗