使用MUI SvgIcon的component属性后页面空白，无报错求解决

• 检查SVG文件有效性
  部分SVG可能存在语法错误、空内容或与MUI不兼容的硬编码属性（比如固定的width/height）。先替换为一个极简测试SVG验证：

  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/>
  </svg>
  

  若测试SVG能正常渲染，说明原SVG文件存在问题，需要优化原文件的结构或属性。

• 调整Webpack配置优先级
  Next.js默认自带SVG处理规则，可能覆盖了你自定义的SVGR规则。修改next.config.js，先移除默认的SVG处理逻辑，再添加SVGR规则：

  webpack: (config) => {
    // 排除默认规则对SVG的处理
    config.module.rules = config.module.rules.map(rule => {
      if (rule.test?.test('.svg')) {
        return { ...rule, exclude: /\.svg$/ };
      }
      return rule;
    });
  
    // 添加SVGR处理规则
    config.module.rules.push({
      test: /\.svg$/,
      issuer: /\.[jt]sx?$/,
      use: ['@svgr/webpack'],
    });
  
    return config;
  },
  

  修改后重启开发服务器生效。

• 显式传递尺寸属性
  SVGR导出的组件依赖width/height等props确定渲染尺寸，MUI SvgIcon可能未正确传递这些属性，尝试显式设置：

  import DrawIcon from "frontend/public/svgs/draw.svg";
  import SvgIcon from '@mui/material/SvgIcon';
  
  export default function SomeIcon(): JSX.Element {
    return <SvgIcon component={DrawIcon} sx={{ width: 24, height: 24 }} />;
  }
  

  也可以直接使用SVGR导出的组件测试，排除SvgIcon的影响：

  import DrawIcon from "frontend/public/svgs/draw.svg";
  
  export default function SomeIcon(): JSX.Element {
    return <DrawIcon width={24} height={24} fill="currentColor" />;
  }
  

• 排查版本兼容性
  Next.js与@svgr/webpack存在版本适配问题，比如Next.js 13+推荐使用@svgr/webpack@6.x版本。若当前版本不兼容，尝试重新安装指定版本：

  npm uninstall @svgr/webpack
  npm install @svgr/webpack@6.5.1 --save-dev
  

• 查看浏览器隐藏日志
  打开浏览器DevTools：

  • 在Elements面板检查SVG元素是否存在，是否被设置为display: none或尺寸为0；
  • 在Console面板切换到Verbose级别，查看是否有未显示的警告或报错信息。

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