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

【问题标题】：Is there a way to make svg icon adapt to apple system fonts?有没有办法让 svg 图标适应苹果系统字体？
【发布时间】：2020-05-18 06:04:57
【问题描述】：

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

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

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

【问题讨论】：

标签： ios svg material-ui accessibility system-font

【解决方案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，以便容器响应可访问性设置中更改的文本大小。

【讨论】：