Размеры и цвета иконок

В библиотеке MUI (Material-UI) управление размерами и цветами иконок является важной частью стилизации компонентов и поддержания единого визуального языка интерфейса. Библиотека предоставляет гибкие способы настройки через свойства компонентов, а также через системные утилиты, такие как sx и тему (theme).

Размеры иконок

Все иконки в MUI представляют собой компоненты React, обычно импортируемые из пакета @mui/icons-material. Основной способ управления размером иконки — через свойство fontSize.

Стандартные размеры:

import HomeIcon from '@mui/icons-material/Home';

<HomeIcon fontSize="small" />  // 20px
<HomeIcon fontSize="medium" /> // 24px (по умолчанию)
<HomeIcon fontSize="large" />  // 35px
  • small — уменьшенный размер, часто используется в кнопках или списках.
  • medium — стандартный размер, соответствует основной сетке компонентов MUI.
  • large — крупный размер для акцентных элементов интерфейса.

Пользовательские размеры:

Если стандартные значения не подходят, размер можно задавать через свойство sx или style:

<HomeIcon sx={{ fontSize: 48 }} />   // 48px
<HomeIcon style={{ fontSize: '3rem' }} /> // 3rem

fontSize в sx принимает как числовое значение в пикселях, так и строку с CSS-единицами (rem, %, em).

Responsive размеры иконок:

MUI поддерживает адаптивные размеры через систему breakpoints:

<HomeIcon sx={{ fontSize: { xs: 20, sm: 30, md: 40 } }} />
  • xs, sm, md, lg, xl — стандартные брейкпоинты Material-UI.
  • Значения задаются в пикселях, rem или других единицах CSS.

Цвета иконок

Цвет иконки задается через свойство color или через sx.

Стандартные цветовые схемы:

<HomeIcon color="primary" />
<HomeIcon color="secondary" />
<HomeIcon color="error" />
<HomeIcon color="disabled" />
<HomeIcon color="action" />
  • primary — основной цвет темы (theme.palette.primary.main).
  • secondary — вторичный цвет темы (theme.palette.secondary.main).
  • error — цвет ошибок (theme.palette.error.main).
  • disabled — серый цвет для неактивных элементов.
  • action — цвет действий, используется для кнопок, интерактивных элементов.

Пользовательские цвета:

<HomeIcon sx={{ color: '#4caf50' }} />
<HomeIcon sx={{ color: 'rgb(255, 0, 0)' }} />
<HomeIcon sx={{ color: 'hsl(200, 70%, 50%)' }} />

Можно задавать как HEX, так и RGB/HSL значения. Это удобно при точном соответствии бренд-цветам.

Цвет через тему:

Для согласованности с остальными компонентами можно использовать цвета из темы:

import { useTheme } from '@mui/material/styles';

const theme = useTheme();
<HomeIcon sx={{ color: theme.palette.success.main }} />

Такой подход обеспечивает поддержку глобальной темы приложения и упрощает масштабирование дизайна.

Комбинация размера и цвета

Иконки в MUI позволяют одновременно изменять размер и цвет:

<HomeIcon fontSize="large" sx={{ color: 'secondary.main' }} />
<HomeIcon sx={{ fontSize: 50, color: '#ff5722' }} />

При использовании sx можно комбинировать с другими CSS-свойствами, такими как margin, padding, transform:

<HomeIcon sx={{ fontSize: 40, color: 'primary.main', marginRight: 2, transform: 'rotate(45deg)' }} />

Доступность и контрастность

Важно помнить, что цвет иконки должен соответствовать требованиям контрастности для текста и UI:

  • Иконки, передающие информацию (например, ошибки или уведомления), должны быть заметны и отличаться от фона.
  • Для интерактивных элементов рекомендуется использовать цвета темы (primary, secondary) с достаточной контрастностью.
  • Можно применять opacity через sx={{ opacity: 0.5 }} для создания состояния “неактивно”.

Итоговые рекомендации

  1. Использовать стандартные значения fontSize для согласованности.
  2. Применять цвета из темы для унификации дизайна.
  3. Для уникальных случаев использовать sx с точными значениями fontSize и color.
  4. Следить за контрастностью и доступностью, особенно на фоне разных цветовых блоков.
  5. Совмещать размер, цвет и стили через sx для комплексной настройки иконок.

Размеры и цвета иконок в MUI — мощный инструмент, который позволяет не только соблюдать визуальный стиль Material Design, но и создавать уникальные пользовательские интерфейсы с точным контролем над каждым элементом.

Оглавление