[Typescript] Next.js와 Storybook에서 SVG파일을 컴포넌트처럼 사용하기 (with @svgr/webpack)
서론 필자가 최근 프로젝트를 진행하면서, SVG 이미지 파일들을 컴포넌트처럼 import하여 사용하고 싶다는 니즈가 생겼다. 그래서 Next.js와 Storybook 등, Webpack 환경에서 SVG 이미지 파일을 컴포넌트처럼 사용하는 방법을 찾아보았고, 이번 포스팅에선 이를 공유해보려 한다. SVGR과 @svgr/webpack SVGR은 SVG 이미지 파일을 React 컴포넌트로 변환해주는 프로젝트이다. 그중에서 @svgr/webpack 패키지를 이용하면, Webpack 번들러를 이용하는 프로젝트에서 SVG 이미지 파일을 컴포넌트처럼 import하여 사용할 수 있게 된다. SVGR - Transforms SVG into React Components. - SVGR Transforms SVG into ..