Practice) vite-plugin-svgr - SVG를 ReactComponent로 사용하기

부트캠프 리액트 미션을 진행하면서 svg 코드를 사용해 svg 이미지를 페이지에 넣어야 할 일이 생겼다. 

물론 svg 파일을 import 해와 img의 src 속성에 넣어줄 수 있었다. 

import svgIcon from "../assets/cards/visa.svg";

const Practice = () => {
	return <img src=svgIcon />
}

 

하지만 제공해준 페이지를 보니 svg 코드를 그대로 넣고 있어 괜히 나도 그렇게 하고 싶어졌다. 

어차피 공부하면서 만드는 것이고 제출도 다음주 수요일 까지니 그냥 천천히 하기로 했다. 

빨리 해보겠다고 chatGPT를 사용해보았지만, 알려준 대로 해봐도 에러만 반환했다. 

그래서 그냥 구글링 했다. 

여러 페이지를 보고 시도해보았지만, 다음 페이지가 제일 정확했다. 

Importing SVG files as React components with Vite

 

먼저, 나는 CRA가 아닌 vite를 사용했기에 CRA로 한 경우와 다를 수 있음을 참고하길 바란다. 

 

먼저 관련 plugin을 설치해주었다.  

npm i vite-plugin-svgr

해당 plugin을 설치하기 망설여진다면 npm 사이트에 들어가서 weekly downloads를 확인하길 바란다. 

plugin의 성능에 대한 신뢰도는 다운로드수와 비례하니. 

 

다음으로 vite.config.js 에 다음 코드를 더해준다. 

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import svgr from "vite-plugin-svgr";

// https://vitejs.dev/config/
export default defineConfig({
	plugins: [react(), svgr()],
});

 

 

위 블로그 내용에 따라 svg 코드를 import 해와 사용하려 했지만, 에러를 반환했다. 

Cassidy 언니를 믿었는데... 

 

ReactComponent에 빨간 밑줄이 그어지며 "*.svg"' 모듈에 내보낸 멤버 'ReactComponent'이(가) 없습니다. 대신 '"*.svg"에서 ReactComponent 가져오기'를 사용하시겠습니까?" 라는 에러가 뜬다. 

개발하면서 난 빨간색이 싫어졌다. 하...

 

위 문제는 다음 포스트를 참고하면 해결할 수 있다. 

Error) '"*.svg"' 모듈에 내보낸 멤버 'ReactComponent'이(가) 없습니다. 대신 '"*.svg"에서 ReactComponent 가져