Чтобы изменить размер значков React, вы можете использовать несколько методов. Вот несколько вариантов:
-
Встроенный CSS: к компоненту значка можно применить встроенный CSS и установить нужную ширину и высоту. Например:
<Icon style={{ width: '24px', height: '24px' }} />
-
Класс CSS: создайте класс CSS и примените его к компоненту значка. Определите ширину и высоту в классе CSS. Например:
.icon { width: 24px; height: 24px; }
<Icon className="icon" />
-
Стилизация CSS. Если компонент значка поддерживает передачу свойства className, вы можете добавить собственный класс CSS и определить ширину и высоту в файле CSS. Например:
<Icon className="custom-icon" />
.custom-icon { width: 24px; height: 24px; }
-
Использование компонента-обертки. Вы можете создать компонент-оболочку, который отображает компонент значка и применяет желаемую ширину и высоту. Например:
import React from 'react'; const ResizableIcon = ({ size }) => { return <Icon style={{ width: size, height: size }} />; };
<ResizableIcon size="24px" />
-
Реквизиты компонента React: некоторые библиотеки значков предоставляют реквизиты для установки размера непосредственно в компоненте значка. Проверьте документацию конкретной библиотеки значков, которую вы используете, чтобы узнать, доступна ли эта опция.