将 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
  },
})

通过这种配置，我现在可以在整个应用程序中看到我的图像，但只能看到公共图像，如果我尝试按照这种方法添加一个像 React 组件这样的 svg：

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

我最终得到了这个错误：

错误：元素类型无效：应为字符串（对于内置 组件）或类/函数（用于复合组件），但得到： 不明确的。您可能忘记从文件中导出组件 它是在其中定义的，或者您可能混淆了默认导入和命名导入。

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

.babelrc

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

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

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

并像使用它一样

添加 .babelrc 和 inline-react-svg 后，我收到此错误：

语法错误：不支持实验性语法“jsx” 当前启用 (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。