React MUI v5中SvgIcon无法渲染的原因排查求助

你的自定义图标无法渲染的核心原因是图标尺寸被过度缩小，导致肉眼不可见，具体问题点和修复方案如下：

问题分析 #

1. 设置的transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"把图标缩小到原尺寸的10%，同时翻转了Y轴。
2. path的坐标数值极小（比如M15,19.16），结合缩放后，图标在512×512的viewBox里几乎是一个点，自然无法被看到。
3. 手动固定的width/height和transform属性冲突，进一步限制了图标显示。

修复代码 #

调整path坐标匹配viewBox范围，简化SvgIcon属性，同时保留组件复用性：

import { SvgIcon, SvgIconProps } from "@mui/material";

const ImgCompress: React.FunctionComponent<SvgIconProps> = (props) => {
    return (
        <SvgIcon
            viewBox="0 0 512 512"
            fill="#000000"
            {...props} // 允许外部传入属性覆盖默认值，方便调整尺寸、颜色等
        >
            {/* 将原path坐标放大10倍，适配512×512的viewBox */}
            <path d="M150,191.6V150.7a42.7,42.7,0,0,0,60,0h0a42.7,42.7,0,0,0,0-60h0a42.7,42.7,0,0,0-60,0l-30,30-30,30a42.7,42.7,0,0,1-60,0h0a42.7,42.7,0,0,1,0-60h0A42.7,42.7,0,0,1,90,90" />
        </SvgIcon>
    );
};

export default ImgCompress;

关键修改说明 #

• 移除transform属性：直接通过放大path坐标适配viewBox，避免缩放导致的尺寸问题。
• 添加{...props}：让组件支持外部传入width、height、color、sx等属性，比如使用时可以写<ImgCompress sx={{ fontSize: 24, color: 'blue' }} />。
• 简化冗余属性：去掉stroke="none"（默认值）、preserveAspectRatio（Material UI会自动处理），让代码更简洁。

使用示例 #

在其他组件中引入并使用：

import ImgCompress from './ImgCompress';

function MyComponent() {
  return (
    <div>
      {/* 用sx调整尺寸和颜色 */}
      <ImgCompress sx={{ fontSize: 32, color: '#2196f3' }} />
      {/* 直接设置宽高 */}
      <ImgCompress width={48} height={48} />
    </div>
  );
}

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