javascript - 将 SVG 作为 React 组件导入不适用于 Next.js

Question

我使用 Typescript 创建了一个带有 create-react-app 的项目，后来我被要求向其中添加 next.js，发生的事情是它破坏了整个应用程序中的一些 svg。为了解决这个问题，我添加了这个包:https://www.npmjs.com/package/next-images在我的 next.config.js 我最终得到了这个 配置 :

module.exports = withImages({
  webpack: config => {
    return config
  },
})

有了这个配置，我现在可以在整个应用程序中看到我的图像，但只是公共(public)图像，如果我尝试按照这种方法添加一个像 React 组件这样的 svg:

import { ReactComponent as IconPlus } from 'assets/icons/icon-plus.svg'

我最终得到这个错误:

Error: Element type is invalid: expected a string (for built-incomponents) or a class/function (for composite components) but got:undefined. You likely forgot to export your component from the fileit's defined in, or you might have mixed up default and named imports.

我尝试添加 react-svg-inline 正如我在其他一些帖子中看到的那样，所以我最终为 Next.js 添加了 .babelrc，如下所示:
.babelrc

{
  "plugins": [
    "inline-react-svg"
  ]
}

更改后，我将 svg 导入更改为:

import IconPlus from 'assets/icons/icon-plus.svg'

并像使用它一样
添加 .babelrc 和 inline-react-svg 后，我收到此错误:

Syntax error: Support for the experimental syntax 'jsx' isn'tcurrently enabled (5:10):

对此有任何帮助，我在 babel 配置上做错了吗，谢谢:)

Answer 1

更改.babelrc成为:

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

导入您的 .svg相对于其位置的文件:

import IconPlus from "../assets/icons/icon-plus.svg";

您可以阅读有关导入绝对路径的更多信息 here .
如果你只想从 .svg 创建 React 组件，您不必使用 next-images .
这是一个工作示例 https://github.com/vercel/next.js/tree/canary/examples/svg-components .