Компонент Icon из библиотеки @wordpress/components используется для отображения иконок в интерфейсе WordPress. Он позволяет интегрировать как стандартные иконки, так и собственные SVG-графику, компоненты или функции, предоставляя широкие возможности кастомизации.
Импорт компонента Icon
Для использования компонента Icon сначала импортируйте его из @wordpress/components:
import { Icon } from '@wordpress/components';Использование Icon с Dashicon
WordPress предоставляет набор стандартных иконок Dashicon. Чтобы вывести одну из них с помощью компонента Icon, укажите её название в параметре icon.
import { Icon } from '@wordpress/components';
const DashiconExample = () => <Icon icon="admin-tools" />;
В этом примере будет отображаться иконка «admin-tools». Название иконки можно заменить на любое другое из списка Dashicon, доступного в документации WordPress.
Использование Icon с функцией
Вы можете передать функцию, которая возвращает SVG-элемент. Этот метод позволяет более гибко управлять отображением иконки.
import { Icon } from '@wordpress/components';
const CustomFunctionIcon = () => (
<Icon
icon={() => (
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M8 2v20h8V2H8zm2 4h4v12h-4V6z" />
</svg>
)}
/>
);
Здесь функция возвращает SVG-код, что позволяет задать собственную графику. Использование функции удобно, когда необходимо динамически изменять SVG, основываясь на состоянии компонента.
Использование Icon с компонентом
Компонент Icon поддерживает передачу другого React-компонента в качестве иконки. Это особенно полезно, когда иконка реализована как отдельный компонент.
import { Icon } from '@wordpress/components';
import { MyCustomIcon } from '../icons/MyCustomIcon';
const ComponentIconExample = () => <Icon icon={MyCustomIcon} />;
В этом примере MyCustomIcon — это компонент, который возвращает SVG-элемент. Вы можете создать такой компонент отдельно и импортировать его, что обеспечивает повторное использование кода и удобство кастомизации.
Использование Icon с SVG
Для передачи SVG напрямую, можно использовать его как значение параметра icon, минуя необходимость функции или компонента.
import { Icon } from '@wordpress/components';
const SVGIconExample = () => (
<Icon
icon={
<svg width="24" height="24" viewBox="0 0 24 24">
<circle cx="12" cy="12" r="10" fill="#00f" />
</svg>
}
/>
);
Здесь иконка задается непосредственно с помощью SVG-кода. Этот метод упрощает вставку SVG, если иконка не требует динамической обработки.
Указание className
Для добавления класса к иконке можно использовать параметр className. Это полезно для стилизации иконки через CSS.
import { Icon } from '@wordpress/components';
const ClassIconExample = () => <Icon icon="star-filled" className="custom-icon-class" />;
Параметры компонента Icon
Компонент Icon поддерживает следующие параметры:
- icon (тип:
String | Function | Component | null, по умолчанию:null)
Указывает отображаемую иконку. Возможные значения:- Строка — для Dashicons;
- Функция, возвращающая SVG или JSX-элемент;
- Компонент, который сам рендерит иконку;
null, если иконка не отображается.
- size (тип:
Number, по умолчанию:20для Dashicon и24для других типов)
Определяет размер иконки (ширину и высоту). Указывается в пикселях.
Пример с параметром size
import { Icon } from '@wordpress/components';
const SizeExampleSmall = () => <Icon icon="heart" size={16} />;
const SizeExampleLarge = () => (
<Icon
icon={() => (
<svg width="32" height="32" viewBox="0 0 24 24">
<path d="M12 2C8.13 2 5 5.13 5 9s7 11 7 11 7-6.27 7-11S15.87 2 12 2z" />
</svg>
)}
size={32}
/>
);
В первом примере SizeExampleSmall иконка имеет размер 16px, а во втором — 32px. Указание size полезно для настройки внешнего вида иконки в различных частях интерфейса.
Заключение
Компонент Icon в WordPress предоставляет множество вариантов для отображения иконок, поддерживая Dashicons, SVG, функции и компоненты. Благодаря параметрам icon, size, className и другим дополнительным возможностям, Icon может быть использован в различных сценариях интерфейса, сохраняя при этом гибкость и масштабируемость.