MUI SvgIcon无法继承自定义SVG的viewBox，仍用默认值0 0 24 24求助

你的问题核心是MUI SvgIcon 未正确继承自定义SVG的viewBox，同时存在尺寸样式冲突导致视觉上看起来未生效，以下是具体排查和解决步骤：

问题原因分析 #

1. 样式覆盖导致尺寸异常：SvgIcon 默认会给根元素添加 width: 1em; height: 1em; 的内联样式，你在NewSvgIcon中写死的width="83"和height="32"会被这个样式覆盖，导致SVG显示尺寸被强制缩放到1em（通常为24px左右），视觉上误以为viewBox未生效。
2. inheritViewBox的生效逻辑：当你将component设为自定义组件时，SvgIcon无法直接感知组件内部SVG的viewBox，虽然你在NewSvgIcon中覆盖了viewBox，但样式冲突掩盖了实际效果。

解决方案 #

方案一：移除自定义SVG中的固定尺寸，让SvgIcon控制大小 #

修改NewSvgIcon，移除写死的width和height，只保留viewBox和必要属性，同时确保inheritViewBox生效：

import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon'

const NewSvgIcon = (props) => (
  <svg
    {...props}
    viewBox="0 0 83 32"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path d="M59.9995 10.4115H67.5975V13.9172C68.7317 12.4794 69.8835 11.4632 71.044 10.8464C72.2088 10.2295 73.6233 9.91891 75.2918 9.91891C77.5471 9.91891 79.3119 10.6023 80.5907 11.9602C81.865 13.3181 82.5 15.4215 82.5 18.2616V31.9693H74.3065V20.1121C74.3065 18.7586 74.0612 17.8045 73.5708 17.2409C73.0715 16.6729 72.3796 16.3978 71.4819 16.3978C70.4965 16.3978 69.6908 16.7794 69.082 17.5338C68.469 18.2882 68.158 19.655 68.158 21.6164V31.9693H59.9995V10.4115V10.4115Z" />
    <path d="M46.9199 9.91815V13.4498H55.0917L46.9199 16.51V32H55.0917V9.91815H46.9199Z" />
    <path d="M24.1829 30.2067C21.967 31.2939 19.068 31.8353 15.4989 31.8353C10.8394 31.8353 7.17396 30.4508 4.507 27.6729C1.83129 24.8949 0.5 21.194 0.5 16.5744C0.5 11.6487 1.9977 7.65486 4.99748 4.59291C8.00163 1.53097 11.8948 0 16.6813 0C19.646 0 22.1509 0.381633 24.1829 1.14046V7.81905C22.1509 6.5854 19.8343 5.96857 17.2331 5.96857C14.3822 5.96857 12.0787 6.87828 10.327 8.69769C8.57969 10.5127 7.70385 12.9755 7.70385 16.0819C7.70385 19.055 8.52714 21.4292 10.1825 23.1953C11.8335 24.9615 14.0581 25.849 16.8565 25.849C19.5234 25.849 21.967 25.1878 24.1829 23.8698V30.2067ZM42.9742 15.4384C42.1641 14.9902 41.2225 14.7683 40.154 14.7683C38.7001 14.7683 37.5659 15.3141 36.7426 16.388C35.9237 17.4753 35.512 18.9397 35.512 20.799V31.2984H28.8249V9.31896H35.512V13.4015H35.5996C36.6637 10.4195 38.5643 8.92845 41.3189 8.92845C42.0283 8.92845 42.5757 9.0172 42.9742 9.18583V15.4384Z" />
  </svg>
)

const NewIcon = (props: SvgIconProps) => (
  <SvgIcon component={NewSvgIcon} {...props} inheritViewBox />
)

export default NewIcon

之后你可以通过SvgIcon的size属性控制图标大小，比如：

<NewIcon size="large" />
// 或自定义样式
<NewIcon sx={{ width: 83, height: 32 }} />

方案二：将自定义SVG作为SvgIcon的子元素（更推荐） #

这种写法更符合SvgIcon的设计逻辑，inheritViewBox会自动读取子元素SVG的viewBox：

import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon'

const NewIcon = (props: SvgIconProps) => (
  <SvgIcon inheritViewBox {...props}>
    <svg viewBox="0 0 83 32" xmlns="http://www.w3.org/2000/svg">
      <path d="M59.9995 10.4115H67.5975V13.9172C68.7317 12.4794 69.8835 11.4632 71.044 10.8464C72.2088 10.2295 73.6233 9.91891 75.2918 9.91891C77.5471 9.91891 79.3119 10.6023 80.5907 11.9602C81.865 13.3181 82.5 15.4215 82.5 18.2616V31.9693H74.3065V20.1121C74.3065 18.7586 74.0612 17.8045 73.5708 17.2409C73.0715 16.6729 72.3796 16.3978 71.4819 16.3978C70.4965 16.3978 69.6908 16.7794 69.082 17.5338C68.469 18.2882 68.158 19.655 68.158 21.6164V31.9693H59.9995V10.4115V10.4115Z" />
    <path d="M46.9199 9.91815V13.4498H55.0917L46.9199 16.51V32H55.0917V9.91815H46.9199Z" />
    <path d="M24.1829 30.2067C21.967 31.2939 19.068 31.8353 15.4989 31.8353C10.8394 31.8353 7.17396 30.4508 4.507 27.6729C1.83129 24.8949 0.5 21.194 0.5 16.5744C0.5 11.6487 1.9977 7.65486 4.99748 4.59291C8.00163 1.53097 11.8948 0 16.6813 0C19.646 0 22.1509 0.381633 24.1829 1.14046V7.81905C22.1509 6.5854 19.8343 5.96857 17.2331 5.96857C14.3822 5.96857 12.0787 6.87828 10.327 8.69769C8.57969 10.5127 7.70385 12.9755 7.70385 16.0819C7.70385 19.055 8.52714 21.4292 10.1825 23.1953C11.8335 24.9615 14.0581 25.849 16.8565 25.849C19.5234 25.849 21.967 25.1878 24.1829 23.8698V30.2067ZM42.9742 15.4384C42.1641 14.9902 41.2225 14.7683 40.154 14.7683C38.7001 14.7683 37.5659 15.3141 36.7426 16.388C35.9237 17.4753 35.512 18.9397 35.512 20.799V31.2984H28.8249V9.31896H35.512V13.4015H35.5996C36.6637 10.4195 38.5643 8.92845 41.3189 8.92845C42.0283 8.92845 42.5757 9.0172 42.9742 9.18583V15.4384Z" />
    </svg>
  </SvgIcon>
)

export default NewIcon

这样SvgIcon会自动继承子SVG的viewBox="0 0 83 32"，同时你可以通过size或sx属性灵活控制图标尺寸。

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