AdaptiveIconRenderer

Когда использовать?

В зависимости от размера экрана, желательно использовать тот или иной размер иконок. На настольных экранах стоит использовать иконки меньшего размера, для мобильных большего. Предложения по конкретным размерам можно найти в документациях компонентов.

Пример использования

В примере ниже мы “искусственно” переопределяем адаптивность через AdaptivityProvider, для того, чтобы наглядно убедиться в разном размере отображаемых иконок. В реальных условиях достаточно просто использовать AdaptiveIconRenderer, который будет самостоятельно определять, когда необходимо показать тот или иной размер иконки.

Передача свойств в иконки

const StyledIcon24 = (props) => <Icon24SmileOutline {...props} className="my-class-24" />;
const StyledIcon28 = (props) => <Icon28SmileOutline {...props} className="my-class-28" />;
 
<AdaptiveIconRenderer IconCompact={StyledIcon24} IconRegular={StyledIcon28} />;

Свойства и методы