Next.js 15 - svgr

Next.js에 svg를 적용하기 위해서 본인이 선호하는 방법은 svg를 컴포넌트로 만들어 적용하는 방식이다.

이유는 props를 통해 간단하게 fill, stroke를 수정할 수 있기 때문이다.

 

이를 위해 svgr이 필요하다.

 

svgr?

SVG 파일을 react 나 next.js에서 쉽게 다루기 위한 webpack 설정 / babel 설정
SVG 파일을 컴포넌트화 가능

 

 

1. 설치

npm i -D @svgr/webpack
#or
yarn add -D @svgr/webpack

 

 

2. next.config.js 설정

webpack 설정을 추가하면 코드를 build할 때, svg 파일을 자동으로 react component로 만들어준다.

// next.config.js

import type { NextConfig } from "next";

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

export default nextConfig;

 

 

3. SVG 컴포넌트 생성

// public/assets/svg/angle-left.tsx

interface ISvgIcon {
  className: string;
}

const AngleLeftIcon = ({ className }: ISvgIcon) => (
  <svg
    className={className}
    aria-hidden="true"
    xmlns="http://www.w3.org/2000/svg"
    fill="none"
    viewBox="0 0 24 24"
  >
    <path
      stroke="currentColor"
      strokeLinecap="round"
      strokeLinejoin="round"
      strokeWidth="2"
      d="m15 19-7-7 7-7"
    />
  </svg>
);

export default AngleLeftIcon;

 

 

4. 사용

"use client";

import AngleLeftIcon from "~/public/assets/svg/angle-left";

const SvgPage = () => {
  return (
    <div className="w-full h-full flex flex-col justify-center items-center gap-4">
      <AngleLeftIcon className="w-6 h-6 text-gray-600" />
    </div>
  );
};

export default SvgPage;

 

 

5. 그 외 방법

svg를 이미지로도 처리가능한데 단순하게 svg 파일을 그대로 Image src에 넣어주면 된다.

// public/assets/angle-left.svg

<svg
    aria-hidden="true"
    xmlns="http://www.w3.org/2000/svg"
    fill="none"
    viewBox="0 0 24 24"
  >
    <path
      stroke="currentColor"
      strokeLinecap="round"
      strokeLinejoin="round"
      strokeWidth="2"
      d="m15 19-7-7 7-7"
    />
  </svg>

 

"use client";

import Image from "next/image";
import AngleLeftSvg from "~/public/assets/svg/angle-left.svg";

const SvgPage = () => {
  return (
    <div className="w-full h-full flex flex-col justify-center items-center gap-4">
      <Image src={AngleLeftSvg} alt="angle-left" width={24} />
    </div>
  );
};

export default SvgPage;