有几种可能的方法来解决这个问题：

• webpack通过@svgr/webpack
• 巴别塔通过babel-plugin-inline-react-svg
• 通过next.config.js中的Dangerously Allow SVG获取Next.js镜像(不推荐使用)
  首先，您的SVG图片需要是可填充的。如何做到这一点超出了问题的范围，但网上有很多资源可以帮助你。

适用于下面的每种方法(为节省空格不重复)

在您希望SVG显示的文件中

import Star from './star.svg'

const Example = () => (
  <div>
    // set your color in fill and stroke is optional
    <Star height="100" width="100" fill="#6973ff" stroke="black" />
  </div>
)

webpack(推荐选择)

我在Codesandbox上用这种方法做了一个demo
从react-svgr中提取的代码片段
1.安装yarn add --dev @svgr/webpack
1.在next.config.js文件中添加以下内容：

module.exports = {
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/i,
      issuer: /\.[jt]sx?$/,
      use: ['@svgr/webpack'],
    })

    return config
  },
}

1.查看您希望SVG显示上述代码的文件中的*

巴别塔

从plugin repo中提取的代码片段
1.yarn add -D babel-plugin-inline-react-svg
1.在.babelrc文件中添加以下内容：

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

1.查看您希望SVG显示上述代码的文件中的*

Next.js镜像(不推荐)

摘自Next.js，关于你不应该使用这种方法的原因：
由于几个原因，默认加载器不会优化SVG图像。首先，SVG是一种矢量格式，这意味着它可以无损地调整大小。其次，SVG具有许多与HTML/CSS相同的功能，如果没有正确的内容安全策略(CSP)标头，可能会导致漏洞。
由于在Next.js中所说的内容，我不会编写这个示例，因为考虑到其他方法，它是多余的。
如果您仍想遵循此流程，可以查看他们的文档。

您可以使用SVGR包(https://react-svgr.com/docs/next/)并将SVG转换为Reaction组件。然后使用Fill属性或样式道具更改填充。