NextJS에서 svg 사용하기

next에서는 react에서 사용하는 방식으로 svg를 읽으면 svg를 읽을 수 없다는 에러가 발생한다. 그래서 추가 설치 및 설정이 필요하다.

@svgr/webpack 설치

npm i -D @svgr/webpack

next.config 수정

const nextConfig = {
  reactStrictMode: true,
  webpack: (config) => {
    // 아래를 추가합니다.
    config.module.rules.push({
      test: /\.svg$/i,
      issuer: /\.[jt]sx?$/,
      use: ['@svgr/webpack'],
    });
    return config;
  },
};

module.exports = nextConfig;

next.config를 수정하였으므로 서버를 재시작한다.

svg를 컴포넌트로 만들기

// components/svg/Airbnb.tsx
import React from 'react';
import styled from 'styled-components';

const Svg = styled.svg`
  width: 50px;
  height: 50px;

  path {
    fill: transparent;
    stroke: red;
    stroke-width: 10;
  }
`;

function Airbnb() {
  return (
    <Svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
      <path d="M224 373.12c-25.24-31.67-40.08-59.43-45-83.18-22.55-88 112.61-88 90.06 0-5.45 24.25-20.29 52-45 83.18zm138.15 73.23c-42.06 18.31-83.67-10.88-119.3-50.47 103.9-130.07 46.11-200-18.85-200-54.92 0-85.16 46.51-73.28 100.5 6.93 29.19 25.23 62.39 54.43 99.5-32.53 36.05-60.55 52.69-85.15 54.92-50 7.43-89.11-41.06-71.3-91.09 15.1-39.16 111.72-231.18 115.87-241.56 15.75-30.07 25.56-57.4 59.38-57.4 32.34 0 43.4 25.94 60.37 59.87 36 70.62 89.35 177.48 114.84 239.09 13.17 33.07-1.37 71.29-37.01 86.64zm47-136.12C280.27 35.93 273.13 32 224 32c-45.52 0-64.87 31.67-84.66 72.79C33.18 317.1 22.89 347.19 22 349.81-3.22 419.14 48.74 480 111.63 480c21.71 0 60.61-6.06 112.37-62.4 58.68 63.78 101.26 62.4 112.37 62.4 62.89.05 114.85-60.86 89.61-130.19.02-3.89-16.82-38.9-16.82-39.58z" />
    </Svg>
  );
}

export default Airbnb;

import하여 사용

function Header() {
  return (
    <Container>
      <Link href="/">
        <LogoWrapper>
          <Airbnb />
        </LogoWrapper>
      </Link>
    </Container>
  );
}

export default Header;

이로써 Next에서 svg를 사용할 수 있게 되었다.