NextJS에서 SVG 불러오는 방법

babel-plugin-inline-react-svg을 설치한다.

 

npm i babel-plugin-inline-react-svg

 

 

루트에 .babelrc 파일을 생성해서 아래 내용을 입력한다.

 

{
  "presets": ["next/babel"],
  "plugins": ["inline-react-svg"]
}

 

 

아래와 같이 바로 불러올 수 있다.

 

import CircleIcon from './circle.svg';

 

 

참고 package.json

 

{
  "dependencies": {
    "@emotion/react": "^11.7.1",
    "@emotion/styled": "^11.6.0",
    "@mui/icons-material": "^5.2.5",
    "@mui/material": "^5.2.5",
    "babel-plugin-inline-react-svg": "^2.0.1",
    "moment": "^2.29.1",
    "next": "12.0.7",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "styled-components": "^5.3.3"
  },
  "devDependencies": {
    "@babel/core": "^7.16.5",
    "@storybook/addon-actions": "^6.4.9",
    "@storybook/addon-essentials": "^6.4.9",
    "@storybook/addon-links": "^6.4.9",
    "@storybook/react": "^6.4.9",
    "@types/node": "17.0.4",
    "@types/react": "17.0.38",
    "@types/styled-components": "^5.1.19",
    "babel-loader": "^8.2.3",
    "eslint": "8.5.0",
    "eslint-config-next": "12.0.7",
    "eslint-plugin-storybook": "^0.5.5",
    "typescript": "4.5.4"
  }
}

 

 

참고

https://dev.to/dolearning/importing-svgs-to-next-js-nna