Blitz.js(Next.js)에서 인라인 SVG로 작업하는 방법

Blitz.js에서는 Blitz.js에 문서화된 대로 설정할 때 인라인 SVG가 작동하지 않는다는 문제가 제기되었습니다.

이는 Next.js의 문제이며 문제here에서 다룹니다.
Blitz.js는 Next.js 위에 구축되며 프런트 엔드는 Next.js와 동일합니다.
Next.js와 같은 응답으로 해결할 수 있습니다.

먼저 - 패키지 설치

$ yarn add babel-plugin-inline-react-svg
$ yarn add babel-plugin-module-resolver

두 번째 - babel.config.js 편집

module.exports = {
  presets: ["next/babel"],
  plugins: [
    ["module-resolver", { "root": ["."] }],
    "inline-react-svg",
  ],
}

이제 SVG를 볼 수 있습니다!

방법을 모르시면 Github에 소스를 올렸으니 참고하시면 됩니다.

https://github.com/nitaking/sample-blitz-svg-setting

특정 약정을 보려면 here을 클릭하십시오.

이렇게 나옵니다🙌



좋은 Blitz.js 생활 되세요!