react next.js 에서 svg 사용하는 법

 

 

react 프로젝트에서 svg를 import 시키고 컴포넌트를 아래와 같이 추가하였다

import {useRouter} from "next/router";

import GoogleSignIn from '@/assets/googleIcon.svg'

export const JoinGoogle = () => {

    function socialLoginGoogle() {
        ///////
    }

    return (
        <>
            <button onClick={socialLoginGoogle}>
                <GoogleSignIn />
                구글로 가입하기
            </button>
        </>
    )
}

별다른 문제가 없을거라 생각했는데, 오류가 발생하였다

 

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

 

터미널 로그에서는 <GoogleSignIn/>을 확인하라고 보여진다

 

Check your code at JoinGoogle.tsx:21.

 

확인해보니, svg파일을 사용하려면 별도의 플러그인을 install 해야한다고 함...

 

해결방법

 

1. install svgr webpack 

npm install -D @svgr/webpack

 

터미널에서 svgr webpack 을 다운받는다

 

2. next.config.js 수정

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

....
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/,
      use: ['@svgr/webpack'],
    })
    return config
  },
  
  .....
}

module.exports = nextConfig

 

webpack 설정을 추가해준다