Next.js svg 다루기

Nextjs에서 svg 사용하기

• svg 경로 : public/icon.svg

<svg
 xmlns='https://www.w3c.org/2000/svg'
 version='1.1'
 width='36'
 height='36'
 viewbox='0 0 36 36'>
 
 <path fill='#fff'/>
</svg>

Next에서는 약간의 설정이 필요합니다.

@svg/webpack 설치

npm i --dev @svg/webpack

next.config.js 수정

const nextConfig = {
  reactStrictMode: true,
  webpack( config ) {
    config.module.rules.push( {
      test: /\.svg$/,
      use: ["@svgr/webpack"]
    } );
    return config;
  },
}

module.exports = nextConfig

1. img 이용

import Icon from './public/icon.svg'

<img src={Icon}/>

2. Component로 만들기

import Icon from './public/icon.svg'
<div>
  <Icon />
</div>

svg 크기, 색 수정

svg에서 수정하고 싶은곳을 current로 바꿔줍니다.

<svg
 width='current'
 height='current'>
 <path fill='current'>
</svg>

width, height, fill을 prop으로 내려줍니다.

import Icon from './public/icon.svg';

<Icon width='24' height='24' fill='red'/>;