导入 SVG 作为 React 组件不能与 Next.js 一起使用

Question

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

在我的next.config.js上，我得到了这个配置：

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

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

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";

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

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

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

Answer 2

您不需要添加任何库，如果需要，您可以使用您拥有的 svg 创建一个新组件。 想象一下，您的源文件夹是这样组织的：

-成分

|--SvgIconPlus

|---索引.tsx

-页

|-index.tsx

1-只需复制返回组件中的 svg 文件

export default function SvgIconPlusComponent() {
    return (
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12.27 12" xmlns:v="https://vecta.io/nano"><path d="M11.17 4.38L6.88 8.99V0h-1.5v8.99L1.1 4.38 0 5.4 6.13 12l6.14-6.6-1.1-1.02z" fill="#000"/></svg>
    );
}

2- 将其导入您的页面 index.tsx

import SvgIconPlusComponent from '../components/SvgIconPlus'
export default function MyPage(){
    return(<div><SvgIconPlusComponent /></div>);
}