[React.js] 컴포넌트에서 svg 파일 import 하기

ERROR in ./src/components/layout/Navi.js 31:40-44 export 'ReactComponent' (imported as 'Home') was not found in './home_black_24dp.svg' (possible exports: default) @ ./src/components/index.js 3:0-33 6:0-39 @ ./src/index.js 12:0-40 42:42-51

React.js 컴포넌트에서 svg 파일을 import 하기 위해서 시도했는데 다음과 같은 에러가 발생했다. import 명령 코드는 아래와 같았다.

import HomeIcon from '@assets/svg/home_black_24dp.svg';

 

정확한 경로를 잘 입력했는데 뭐가 문제였을까? 구글링으로는 답을 못 찾겠더라! 그래서 chatGPT에 물어 봤다. 그랬더니 "@svgr/webpack"라는 모듈을 설치해야한다고 했다. package.json 파일을 살펴보니 해당 모듈은 이미 존재했다. 그런데 왜 import가 안 되는 걸까? 해당 모듈은 dependencies가 아닌 devDependencies에 설치되어야 했다!

npm install @svgr/webpack --save-dev

 

참고 자료

https://velog.io/@juno7803/React-React%EC%97%90%EC%84%9C-SVG-%ED%99%9C%EC%9A%A9%ED%95%98%EA%B8%B0

[React] React에서 SVG 활용하기