Nextjs 에서 SVG 활용하기

https://www.daleseo.com/css-svg/

SVG css 요소 적용하기.

svg 예시

파일경로 : assets/icon-24-reservation.svg

<svg
  xmlns="http://www.w3.org/2000/svg"width="24"height="24"viewBox="0 0 24 24"><path fill="#fff" fill-rule="evenodd" d="...." /></svg>

#react에서 svg 사용법

#1. img src에 이용


import Reservation from 'assets/icon-24-reservation.svg'

<img src={Reservation}>

하지만 img 방식으로 넣었을 때 svg를 css로 커스텀할때 문제가 있었습니다.

next에서 svg 사용하기

next에서는 react에서 사용하는 방식으로 svg를 읽으면 svg를 읽을 수 없다는 에러가 뜹니다. 그렇기 때문에 아래와 같이 진행합니다.

#@svgr/webpack 설치

yarn add -D @svgr/webpack

#next.config.js 수정


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

#svg 읽어오기

위와 같이 세팅을 완료했으면 아래와 같이 컴포넌트 형식으로 svg를 가져올 수 있습니다.


import Ci from "assets/svg/ci.svg";

const Index = () => {
  return <Ci />;
};
export default Index;

💡

나의 경우에는 svg의 두께를 fontSize나 strokeWidth로 조정하려고위와 같은 방법을 썼는데 두께가 조정되는 SVG가 있고 RadixUi에서 가져온 SVG 같은 경우 fill로 만들어져서 해당 방법이 불가능하다는 답변을 받았다.