有沒有辦法讓svg圖標適應蘋果系統字體？

Question

考慮以下簡單的 React / MaterialUI 組件

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

附上我 iPhone 上的結果。 當我更改 iPhone 上的Settings > Accessibility > Larger Text選項時， 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以便容器響應可訪問性設置中更改的文本大小。