Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: move icons to use fontSize #257

Closed
wants to merge 2 commits into from

Conversation

inomdzhon
Copy link
Contributor

@inomdzhon inomdzhon commented Aug 10, 2022

Все подробности в issue #237.

Разъяснение решений

  1. Создал внутренние параметры fontSizeWidth/fontSizeHeight, чтобы высчитывание было один раз вне рантайма (см. pxToEm() в файле scripts/reactify.js).

  2. Создал внутренние параметры viewBoxWidth/viewBoxHeight, которые всегда числовые и совпадают с viewBox, т.к. width/height у SvgIcon изначально не должны быть определены:

    1. Так мы понимаем использовать fontSizeWidth/fontSizeHeight или нет.
    2. Выставляем модификаторы с размерами в className на основе viewBoxWidth/viewBoxHeight.

    Передача width/height эти два момента перебьёт.

    PS: Можно парсить viewBox, но это, кмк, оверхед операция, лучше уж отдельный примитив передавать.

Дополнительно

Поправил в документации заголовок под названием Кастомные размеры

image


const reactify = (symbol, componentName) => {
const width = symbol.viewBox.split(' ')[2];
const height = symbol.viewBox.split(' ')[3];
const defaultWidth = Number(symbol.viewBox.split(' ')[2]);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Я бы предложил оперировать термином не default, а viewBoxWidth

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Поправил, спасибо

Приставку relative на fontSize заменил для ясности

@github-actions
Copy link

👀 Docs deployed

See the docs for this PR at https://vkcom.github.io/icons/pull/257/

*
* @default берётся максимальная ширина или высота иконки (см. `viewBox`)
*/
fontSize?: string | number;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

number | 'inherit'?

Copy link
Contributor Author

@inomdzhon inomdzhon Aug 10, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Хм, думал об этом, но font-size принимает гораздо больше значений

image

или думаешь стоит ограничить?

UPD
а, такая типизация не будет покрывать передачу "<number>em", "<number>%" и т.п.

@vkcom-publisher
Copy link
Contributor

vkcom-publisher commented Aug 10, 2022

size-limit report 📦

Path Size
JS 2.39 MB (0%)
JS (gzip) 642.04 KB (0%)
JS (brotli) 472.38 KB (0%)
JS ES6 with Icon16Add only import (tree shaking) 4.51 KB (0%)
SVG 2.82 MB (0%)

@inomdzhon inomdzhon force-pushed the issue237-mv-to-use-fontSize branch from f9cf67e to dd63966 Compare August 10, 2022 12:18
@inomdzhon inomdzhon force-pushed the issue237-mv-to-use-fontSize branch from fa2556e to 51a5d0e Compare August 10, 2022 12:46
@inomdzhon
Copy link
Contributor Author

см. #237

@inomdzhon inomdzhon closed this Nov 28, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
3 participants