[Next.js] SVG와 next/image

1. 문제

내가 참여하지 않은 기존 작업물에 SVG로 아이콘을 넣어야 했다.
상태에 따라 두가지 색으로 바껴야 함.
기존에 svgr을 설치하지 않고 next/image로 다수 사용함.

2. 방법

2-1. SVGR

svgr을 설치하면 손쉽게 svg 파일을 그대로 놔둔채 스타일을 조작할 수 있다.

//next.config.js

 module.exports = {
   webpack(config) {
     const fileLoaderRule = config.module.rules.find(
       (rule) => rule.test && rule.test.test?.(".svg")
     );
     fileLoaderRule.exclude = /\.icon\.svg$/;
     config.module.rules.push({
       test: /\.icon\.svg$/,
       loader: require.resolve("@svgr/webpack"),
     });
     return config;
   },
 };

(출처: stackoverflow)

-> 기존에 next/image에 파일경로로 사용한 svg 아이콘들을 보존하면서 svgr을 도입하면서도 url-loader를 설치하지 않아도 되게 웹팩을 위와 같이 설정해준다.

-> 기존의 svg 파일은 기존의 경로를 그대로 유지하고 svg 스타일 조작이 필요할 때 아래와 같이 사용해 줄 수 있다. 나는 tailwind로 설정하였으나 타 스타일 라이브러리 또는 직접적인 props로 조작할 수도 있다. 참고로 svg 파일에 변경하고 싶은 부분을 currentColor 또는 current로 수정해주는것이 필요하다.

//Component.tsx

import IconProject from "../icons/IconX.icon.svg";

<IconX className="w-7 h-7 text-white" />

2-2. SVG를 React component로 변경하여 사용

어떤 라이브러리도 설치할 수 없다면 직접 SVG파일을 tsx 파일로 변경해서 사용할 수 있다.
Svgr Playgrond 사이트를 활용하면 편하게 변경된 코드를 바로 확인할 수가 있다.

그리고 이렇게 컴포넌트화 시킨 svg 이미지/아이콘들은 똑같이 props로 스타일을 조작하면 되겠다.

ps. 내가 한 실수

컴포넌트화 시킨 아이콘들을 map 내에서 불러올땐
이것또한 컴포넌트이기에 
{item.icon}이 아닌 <item.icon />과 같은 형태로 사용해야 함