NextJS에서 SVG 불러오는 방법

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

from http://thinkforthink.tistory.com/369 by ccl(A) rewrite - 2021-12-28 01:26:58