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

Question

我使用 Typescript 使用 create-react-app 创建了一个项目，后来我被要求向其中添加 next.js，发生的情况是它破坏了应用程序中的一些 svgs。为了解决这个问题，我添加了这个包：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";

您可以在此处阅读有关导入绝对路径的更多信息。

如果您只想从 中创建 React 组件.svg，则不必使用next-images.

这是一个工作示例https://github.com/vercel/next.js/tree/canary/examples/svg-components。