[Next.js] SVG 컴포넌트 사용하는 방법 (React 보다 짱편함!)

React 에서의 SVG

그동안 React 에서 SVG 를 사용할 때 컴포넌트로 만들어서 사용하였다.

SVG 를 컴포넌트로!

컴포넌트로 만들고 해당 SVG 의 width, height, 색상을 직접 조절할 수 있게 아래 코드처럼 만들어 사용하였다.

svg 컴포넌트 활용

그런데 svg 를 jsx 컴포넌트로 만드는 과정은 매우 귀찮고 번거롭다 🥲

 

반면 Next.js 에서는 SVG 를 다루는 과정이 React 보다 너무 쉽고 간편하다!

 

Next.js 에서의 SVG

Next.js 에서 SVG 를 컴포넌트로 사용하려면 아래 단계를 거쳐야 한다.

 

@svgr/webpack 설치

SVG 를 컴포넌트로 변환시켜 주는 플러그인 패키지인 @svgr/webpack 를 다운로드한다.

npm install @svgr/webpack

 

웹팩 설정 추가

next.config.js 에 웹팩 설정을 추가한다. 

 .js, .jsx, .ts, .tsx 파일에서 임포트 된 모든 .svg 파일을 @svgr/webpack 로더를 사용해 컴포넌트로 변환하도록 웹팩을 설정하였다.

/** @type {import('next').NextConfig} */
const nextConfig = {
  // 생략...
  webpack: (config) => {
    config.module.rules.push({
      test: /\.svg$/i,
      issuer: /\.[jt]sx?$/,
      use: ['@svgr/webpack'],
    });
    return config;
  },
};

module.exports = nextConfig;

 

사용하기

이제 SVG 를 컴포넌트로 사용할 준비가 끝났다.

 

사용하기 위해 SVG 파일을 import 하고

import HeartIcon from '@/public/svgs/heart-icon.svg';

아래 코드처럼 SVG 를 컴포넌트처럼 사용하였다.

SVG 를 컴포넌트처럼

그러면 화면에 해당 SVG 가 잘 나타나게 된다.

잘보임

 

너비, 높이, 색 바꾸기

만약 기존 SVG 의 너비와 높이 색을 바꾸고 싶을 경우 SVG 파일을 직접 수정해야 한다.

 

이렇게 SVG 가 있을 때 width 와 height 를 바꾸고 색상인 fill 과 stroke 를 원하는 대로 바꾸기 위해 내용을 current 로 바꿔야 한다. 

기존 SVG

아래 사진에서는 다 안 보이지만 width, height, fill, stroke 모두 current로 바꿔주었다. 그럼 해당 SVG 를 컴포넌트로 사용할 때 props 를 사용해서 값을 설정할 수 있게 된다.

current 로 바꿈

사용하는 법

컴포넌트에 props 값을 넘겨주는 것처럼 똑같이 width, height, fill, stroke 값을 넘겨준다.

컴포넌트 props 처럼

그러면 SVG 가 위에서 넘겨준 값 그대로 잘 설정이 되는 것을 볼 수 있게 된다.

결과

 

마치며...

평상시에 React 에서 SVG 를 사용할 때 직접 컴포넌트로 만들어서 사용했었는데 이 과정이 Next.js 에서는 보다 간편하다!

근데 단점은 width, height 이런 props 의 기본값을 설정할 수 없다는 점인 것 같다. 이 부분에 대해서는 조금 더 알아봐야 될 것 같다