如何替换StyledToggleButton为绿色SVG播放按钮并保留原有功能

我已经实现了一个小尺寸的StyledToggleButton，现在需要将其替换为UX设计师提供的静态HTML中ID为Group_33的绿色SVG播放按钮，同时保留原有切换播放/停止的交互功能（原功能通过started状态控制图标显示切换），尝试多种方法均未成功。

静态页面代码 #

<div className="Custom_Size__12">
  <div id="Group_33">
    <svg className="Rectangle_19">
      <rect id="Rectangle_19" rx="229.5" ry="229.5" x={0} y={0} width={459} height={459}>
      </rect>
    </svg>
    <svg className="Polygon_2" viewBox="0 0 217 171">
      <path id="Polygon_2" d="M 98.36752319335938 15.96914386749268 C 103.0805435180664 8.541252136230469 113.9194412231445 8.541252136230469 118.6324615478516 15.96914386749268 L 205.3066864013672 152.5709228515625 C 210.3759765625 160.560302734375 204.6361541748047 171 195.1742248535156 171 L 21.82577323913574 171 C 12.36384773254395 171 6.624013900756836 160.560302734375 11.69330406188965 152.5709228515625 Z">
      </path>
    </svg>
  </div>
</div>

React项目原有代码 #

<Card style={style.main}>
  <CardContent>
    <Stack
      direction="row"
      justifyContent="center"            
      spacing={2}        
    >
      <Item>
        <ToggleButton
          value="false"
          selected={pOISelected}
          onChange={onPOISelected}
        >
          <AdjustIcon />
        </ToggleButton>
      </Item> 
      <Item>
        <StyledToggleButton                    
          value="false"
          selected={started}
          onChange={() => {
                 onToggle();          
          }}
        >
          <PlayCircleOutlineIcon sx={{display: started ? 'none' : 'block'}}/>
          <StopIcon sx={{display: started ? 'block' : 'none' }}/>
        </StyledToggleButton>
      </Item> 
    </Stack>
  </CardContent>
</Card>

解决方案 #

1. 将静态SVG转为React组件 #

把设计师提供的播放SVG和对应的停止状态SVG封装成React组件，调整尺寸适配原有按钮大小：

// 播放状态SVG组件
const PlaySvg = () => (
  <div sx={{ position: 'relative', width: '24px', height: '24px' }}>
    <svg sx={{ width: '100%', height: '100%', fill: '#2ecc71' }}>
      <rect rx="50%" ry="50%" width="100%" height="100%" />
    </svg>
    <svg viewBox="0 0 217 171" sx={{ 
      position: 'absolute', 
      top: '50%', 
      left: '50%', 
      transform: 'translate(-50%, -50%)',
      width: '16px', 
      height: '12px', 
      fill: '#ffffff' 
    }}>
      <path d="M 98.36752319335938 15.96914386749268 C 103.0805435180664 8.541252136230469 113.9194412231445 8.541252136230469 118.6324615478516 15.96914386749268 L 205.3066864013672 152.5709228515625 C 210.3759765625 160.560302734375 204.6361541748047 171 195.1742248535156 171 L 21.82577323913574 171 C 12.36384773254395 171 6.624013900756836 160.560302734375 11.69330406188965 152.5709228515625 Z" />
    </svg>
  </div>
);

// 停止状态SVG组件
const StopSvg = () => (
  <div sx={{ position: 'relative', width: '24px', height: '24px' }}>
    <svg sx={{ width: '100%', height: '100%', fill: '#2ecc71' }}>
      <rect rx="50%" ry="50%" width="100%" height="100%" />
    </svg>
    <svg viewBox="0 0 171 171" sx={{ 
      position: 'absolute', 
      top: '50%', 
      left: '50%', 
      transform: 'translate(-50%, -50%)',
      width: '12px', 
      height: '12px', 
      fill: '#ffffff' 
    }}>
      <rect width="100%" height="100%" rx="8" />
    </svg>
  </div>
);

2. 替换原有图标组件 #

在StyledToggleButton中用自定义SVG组件替换原有的Material UI图标，保留原状态控制逻辑：

<Card style={style.main}>
  <CardContent>
    <Stack
      direction="row"
      justifyContent="center"            
      spacing={2}        
    >
      <Item>
        <ToggleButton
          value="false"
          selected={pOISelected}
          onChange={onPOISelected}
        >
          <AdjustIcon />
        </ToggleButton>
      </Item> 
      <Item>
        <StyledToggleButton                    
          value="false"
          selected={started}
          onChange={() => onToggle()}
        >
          <PlaySvg sx={{ display: started ? 'none' : 'block' }} />
          <StopSvg sx={{ display: started ? 'block' : 'none' }} />
        </StyledToggleButton>
      </Item> 
    </Stack>
  </CardContent>
</Card>

关键说明 #

• 简化原SVG结构，用百分比宽高替代固定数值，适配小尺寸按钮
• 通过相对/绝对定位确保内部图标居中显示
• 复用原有started状态控制SVG组件的显示切换，完全保留交互逻辑
• 可修改fill属性值匹配设计师指定的绿色色调

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