[Next.js]svgr을 사용해서 svg동적으로 사용하기

import Image from 'next/image';
import home from '@/public/assets/footer/home.svg';

<Image src={home} alt="home svg" width={50} height={50} color="red" />

width, height값은 적용되지만 color는 적용이 되지 않았다.

 

import red_home from '@/public/assets/footer/red-home.svg';

<Image src={red_home} alt="home svg" width={50} height={50} />

svg의 색상만 바꾼 파일을 또 만들어 사용하면 가능하지만 이런게 아닌 동적으로 관리 하고싶었다.

 

구글링을 해보니 React컴포넌트로 svg를 반환하고 props로 css를 동적으로 관리 할수있다는 말이있었다.

그런데 좀더 뒤져보니 svgr이라는 라이브러리가 있었다.

이름 그대로 svg파일을 React컴포넌트로 만들어주는 라이브러리다.

 

SVGR - Transforms SVG into React Components. - SVGR

npm install --save-dev @svgr/webpack

const nextConfig = {
    webpack(config, options) {
        config.module.rules.push({
          test: /\.svg$/,
          issuer: { and: [/\.(js|ts)x?$/] }, // for js, ts, jsx and tsx files
          use: ['@svgr/webpack'],
        });
    
        return config;
      },
}

module.exports = nextConfig

 

설명대로 설치후 next.config.js의 설정을 해줬다.

 

import HomeSVG from '@/public/assets/footer/home.svg';

<HomeSVG color="blue"></HomeSVG>
<HomeSVG color="red"></HomeSVG>

결과를 보면 색이 적용되지 않았다.

데브툴스로 확인해보니

 

<svg>에는 color가 제대로 들어갔지만 path의 stroke부분이 svg의 값으로 돼있었다.

해당 svg파일의 path에 stroke의값을 'currentColor'로 주니 해결이 됐다.

<svg xmlns="http://www.w3.org/2000/svg" width="25" height="24" viewBox="0 0 25 24" fill="none">
<path d="" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>