導入 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>);
}