[Feature] Замена пикселей в width и height на относительные единицы

[inomdzhon]

Какая сейчас проблема?

У иконок размеры width и height зашиты в пикселях. Если нам необходимо изменить масштаб, то нам нужно прибегать к передаче width и height

- <Icon24ExternalLinkOutline />
+ <Icon24ExternalLinkOutline width={16} height={16} />

Это не слишком удобно. К тому же некоторые иконки имеют разную пропорцию, например у https://vkcom.github.io/icons/#16/more_vertical width={8} и height={16}, что добавляет дополнительные сложности.

Бывает есть иконка в тексте (см. Рис. 1)

Рис. 1. Пример иконки в предложении

в нашем случае мы должны узнать размер шрифта и задать его иконке через параметры в JS. А если текст меняет свой размер при определенном параметре, то нам ещё потребуется и в JS слушать изменение ширины окна.

Видео с примером проблемы

now.mov

В принципе в VKUI уже есть кейсы, где мы завязываемся на изменение ширины в JS для изменения размера иконки, пример по ссылке.

Как можно?

Чтобы можно было переопределять размеры иконок со следующими преимуществами:

1. Без знания пропорций
2. Без JS
3. Изменение размера одним св-ом

во-первых, предлагаю заменить в width и height единицы px на em, а размер задавать через font-size.

• на примере <Icon24ExternalLinkOutline /> это будет выглядеть так

  <div style="width: 1em; height: 1em; font-size: 24px;">
    <svg width="1em" height="1em" viewBox="0 0 24 24">...</svg>
  </div>

• на примере <Icon16MoreVertical /> это будет

  <div style="width: 0.5em; height: 1em; font-size: 16px;">
    <svg width="0.5em" height="1em" viewBox="0 0 8 16">...</svg>
  </div>

это будет обратно совместимые изменение.

Во-вторых, добавить параметр fontSize, который принимает все валидные для font-size значения. Это для того, чтобы можно было писать

<Icon24ExternalLinkOutline fontSize="inherit" />

=>

<div style="width: 1em; height: 1em">
  <svg width="1em" height="1em" viewBox="0 0 24 24">...</svg>
</div>

и тогда иконка впишется по размерам в текст, а в компонентах можно будет менять её размер через font-size в CSS.

Видео с примером регулирования размера иконки через font-size

want.mov

Ссылки

• Align SVG Icons to Text and Say Goodbye to Font Icons – статья на тему использования em для размеров SVG.
• Так, например, делают MUI (ссылка на документацию Icons)

---

• related [Feature] Проп size для установки width и height одновременно #131

[inomdzhon]

Фича не соответствует требованию со стороны дизайна, что нельзя менять размер иконок

[evtn]

На доступность получается забили, и юзерам с плохим зрением придётся разглядывать микроиконки среди огромных шрифтов?