ios - 有没有办法让 svg 图标适应苹果系统字体？

Question

考虑以下简单的 React / MaterialUI 组件

<div>
  <MenuIcon />
  <span style={{ font: '-apple-system-body' }}>Hello World</span>
</div>

附上我 iPhone 上的结果。当我更改Settings > Accessibility > Larger TextiPhone 上的选项时，Hello World文本会自行调整大小。但是，该图标没有。有没有办法让图标也调整大小？

Answer 1

<div>
  <span style={{ font: '-apple-system-body' }}>
    <MenuIcon style={{ fontSize: 'inherit', transform: 'scale(1.5)' }}/>
  </span>
  <span style={{ font: '-apple-system-body' }}>Hello World</span>
</div>

我注意到默认<MenuIcon>设置font-size:1.5rem。因此，<MenuIcon style={{ fontSize: 'inherit' }}/>取消了这个，并添加transform: scale(1.5)了较小的 svg 大小。此外，我必须将图标的容器设置-apple-system-body为容器以响应可访问性设置中更改的文本大小。