Next.js - SVG 사용해서 컬러, 사이즈 변경하기 (Feat.svrg)

 

 

 

Next.js 로 프로젝트를 하면서 <Image> 컴포넌트에서 svg 아이콘을 사용하려고 하니 컬러변경이 되지 않았다.

알고보니 <Image> 컴포넌트는 svg 형식을 지원하지 않는다고 한다.

그래서 svgr 이라는 툴을 사용하여 리액트 컴포넌트를 svg 파일로 사용할 수 있도록 만드려고 한다.

 

 

Next.js - SVG 사용해서 컬러, 사이즈 변경하기 (Feat.svrg)

 

1. svgr 설치하자

npm 명령어를 사용해 인스톨해주자 

npm install @svgr/webpack

 

 

2. next.config.js 에 아래 설정을 심어주자

// next.config.js

const nextConfig = {
    // 웹팩을 통해 svg 파일을 리액트 컴포넌트로 변환하는 설정이다
    webpack : (config) => {
        config.module.rules.push({
          test: /\.svg$/,
          use: ["@svgr/webpack"]
        });

        return config;
    }
}

module.export = nextConfig

 

 

3. SVG 파일 만들기

이때 커스텀이 필요한 프로퍼티를 변경해주자

// styles/images/star_icon.svg
// width, height 은 'current', fill 은 'currentColor'

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

 

 

4. 이제 임포트해서 컴포넌트 형식으로 사용하면 성 - 공 

import StarIcon from "@/styles/image/icon_star.svg";

<StarIcon color={'gold'} width={30} height={30} />