[TIL] Next.js에서 SVG 이미지 사용하기

다음과 같은 .svg 파일을..

 

[assets/github.svg]

<svg width="50" height="50" viewBox="0 0 254 254" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M127 3.14325C56.8325 3.14325 0 60.0075 0 130.143C0 186.267 36.3855 233.86 86.8362 250.634C93.1862 251.83 95.5146 247.904 95.5146 244.528C95.5146 241.512 95.4087 233.521 95.3558 222.938C60.0287 230.6 52.578 205.899 52.578 205.899C46.7995 191.241 38.4492 187.325 38.4492 187.325C26.9452 179.451 39.3382 179.61 39.3382 179.61C52.0912 180.499 58.7904 192.691 58.7904 192.691C70.1146 212.111 88.519 206.502 95.7792 203.253C96.9222 195.04 100.192 189.442 103.823 186.267C75.6179 183.092 45.974 172.17 45.974 123.507C45.974 109.643 50.8952 98.3192 59.0444 89.4292C57.6157 86.2224 53.3294 73.3107 60.1557 55.8165C60.1557 55.8165 70.7919 52.4087 95.0807 68.834C105.241 66.0083 116.036 64.6112 126.831 64.5477C137.626 64.6112 148.421 66.0083 158.581 68.834C182.711 52.4087 193.347 55.8165 193.347 55.8165C200.173 73.3107 195.887 86.2224 194.617 89.4292C202.713 98.3192 207.634 109.643 207.634 123.507C207.634 172.297 177.948 183.039 149.691 186.161C154.136 189.971 158.263 197.76 158.263 209.656C158.263 226.653 158.104 240.305 158.104 244.433C158.104 247.766 160.327 251.735 166.836 250.465C217.646 233.807 254 186.182 254 130.143C254 60.0075 197.136 3.14325 127 3.14325" fill="#F57386"/>
</svg>

 

React에서 하던 것처럼 import해 Next.js에서 컴포넌트로 사용하려고 하면..

 

svg를 읽을 수 없다는 오류가 뜬다..

---

아래 패키지를 설치해주자

npm i -D @svgr/webpack

next.config.js를 수정해준다

/** @type {import('next').NextConfig} */

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

module.exports = nextConfig;

다음과 같이 바로 import 해서 사용해주자

 

[components/Header/MobileMenu.tsx]

import Github from '../../assets/github.svg';

...
<a target="_blank" href="https://github.com/Web-solute">
  <Github />
</a>

 

성공!

 

Reference🔽

React.js - svg 다루기