Есть ли способ заставить svg icon адаптироваться к системным шрифтам Apple?

Question

Рассмотрим следующий простой компонент React / MaterialUI

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

Результат этого на моем iPhone прилагается. При изменении параметра Settings > Accessibility > Larger Text на моем iPhone размер текста 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, чтобы контейнер реагировал на изменение размера текста в настройках специальных возможностей.