С иконками вроде бы всё просто: выбрал набор, поставил в кнопку — готово. Но в реальном интерфейсе быстро всплывают мелочи: одна иконка кажется крупнее другой при одинаковом размере файла, соседние символы сидят на разной высоте, а в кнопке с текстом визуальный центр почему-то не совпадает с геометрическим. Особенно заметно это в плотных панелях и меню, где рядом стоят десятки значков.
Как вы выбираете размеры для разных сценариев? У меня обычно есть несколько базовых вариантов для интерфейса, а сами SVG стараюсь приводить к единой системе размеров. Но одного одинакового viewBox мало: у значков разная оптическая масса, и иногда их приходится чуть подвинуть или изменить масштаб. Где для вас заканчивается аккуратная оптическая правка и начинается набор случайных исключений?
Интересно также, как вы выравниваете иконку относительно текста: полагаетесь на flex и центрирование, задаёте фиксированную ширину контейнера или правите конкретный SVG? Что делаете с иконками в полях ввода, бейджах и кнопках разной высоты? Поделитесь рабочими правилами или примерами ситуаций, где единые размеры не сработали — такие детали часто помогают избежать долгой ручной подгонки.
Как вы выбираете размеры для разных сценариев? У меня обычно есть несколько базовых вариантов для интерфейса, а сами SVG стараюсь приводить к единой системе размеров. Но одного одинакового viewBox мало: у значков разная оптическая масса, и иногда их приходится чуть подвинуть или изменить масштаб. Где для вас заканчивается аккуратная оптическая правка и начинается набор случайных исключений?
Интересно также, как вы выравниваете иконку относительно текста: полагаетесь на flex и центрирование, задаёте фиксированную ширину контейнера или правите конкретный SVG? Что делаете с иконками в полях ввода, бейджах и кнопках разной высоты? Поделитесь рабочими правилами или примерами ситуаций, где единые размеры не сработали — такие детали часто помогают избежать долгой ручной подгонки.
Комментарии 7
Обсуждение темы — по порядку