Next.js修改SVG颜色失败，配置@svgr/webpack后报错求助

我在使用Next.js时遇到了无法修改SVG颜色的问题，尝试参考相关方法配置后，SVG无法正常显示，还出现了控制台错误。

我的next.config.js配置如下：

const webpack = require('webpack');

// next.config.js
module.exports = {
  images: {
    domains: ['raw.githubusercontent.com'],
  },
  entry: './components/Modal.js',
  module: {
    rules: [
      //...
      {
        test: /\.svg$/,
        use: ['@svgr/webpack'],
      },
    ],
  },
}

控制台报错信息：

next-dev.js?3515:32 Warning: is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.
at watchProject

next-dev.js?3515:32 Warning: The tag is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.

我尝试了两种写法：

1. 直接将SVG作为组件导入使用，无法显示：

import watchProject from "../public/icons/watch_project.svg";
// ...
<watchProject fill="blue"></watchProject>

2. 使用Image组件可以显示，但无法修改颜色属性：

import watchProject from "../public/icons/watch_project.svg";
// ...
<Image src={watchProject} stroke="green" alt="star" width={18} height={18} />

解决方案 #

1. 修正组件命名规范
   React要求组件名称必须以大写字母开头，修改导入和使用方式：

import WatchProject from "../public/icons/watch_project.svg";
// ...
<WatchProject fill="blue" />

2. 清理next.config.js的无效配置
   Next.js会自动管理项目入口，删除配置中的entry: './components/Modal.js'行，避免干扰Webpack的默认配置：

const webpack = require('webpack');

// next.config.js
module.exports = {
  images: {
    domains: ['raw.githubusercontent.com'],
  },
  module: {
    rules: [
      //...
      {
        test: /\.svg$/,
        use: ['@svgr/webpack'],
      },
    ],
  },
}

3. 确保依赖安装完成
   如果还没安装@svgr/webpack，执行以下命令安装：

npm install @svgr/webpack --save-dev
# 或使用yarn
yarn add @svgr/webpack -D

4. 为什么Image组件无法修改颜色？
   next/image是将SVG作为静态图片资源加载，而非React组件，因此无法通过fill、stroke等属性直接修改颜色。只有将SVG作为React组件导入，才能通过属性或CSS控制其样式。

内容的提问来源于stack exchange，提问作者Felipe Cristiano