Компонент Dashicon используется для отображения иконок в WordPress. Это полезный элемент интерфейса для добавления визуальных значков, которые помогают пользователям быстро ориентироваться. Иконки Dashicons доступны по умолчанию в WordPress и могут быть легко интегрированы с помощью компонента Dashicon из библиотеки @wordpress/components.
Подключение компонента
Для использования Dashicon, импортируйте его из библиотеки компонентов WordPress:
import { Dashicon } from '@wordpress/components';
Базовый пример использования
Рассмотрим пример, где мы отображаем несколько иконок:
const MyDashicon = () => (
<div>
<Dashicon icon="admin-home" />
<Dashicon icon="products" />
<Dashicon icon="wordpress" />
</div>
);
Описание пропсов
Компонент Dashicon поддерживает несколько параметров (пропсов), которые позволяют настраивать иконку в зависимости от ваших потребностей. Рассмотрим каждый из них более подробно.
icon(обязательный)- Тип:
string - Определяет название иконки из набора Dashicons. Это обязательный параметр, который указывает, какая иконка будет отображена. Полный список доступных иконок можно найти в документации WordPress.
- Тип:
Примеры значений для icon:
"admin-home": Иконка для главной страницы панели администратора."admin-post": Иконка для постов."media-document": Иконка для медиа-документов.
Пример использования:
<Dashicon icon="media-document" />
size(опциональный)- Тип:
number - Позволяет задать размер иконки в пикселях. Если значение не указано, используется стандартный размер 20px. Значения могут быть любыми положительными числами в зависимости от ваших потребностей.
- Тип:
Пример использования с размером 40 пикселей:
<Dashicon icon="admin-site" size={40} />
className(опциональный)- Тип:
string - Добавляет настраиваемые CSS-классы к иконке. Это полезно для задания дополнительных стилей или управления отображением иконки через стилизацию.
- Тип:
Пример использования с кастомным классом:
<Dashicon icon="star-filled" className="highlight-icon" />
Пример с увеличенным размером иконки
В этом примере зададим несколько иконок с разными размерами, чтобы продемонстрировать, как можно использовать проп size для масштабирования.
const LargeDashicons = () => (
<div>
<Dashicon icon="format-image" size={50} />
<Dashicon icon="format-video" size={35} />
<Dashicon icon="format-gallery" size={25} />
</div>
);
Пример с добавлением кастомных классов
В данном примере мы добавим кастомные классы для иконок, чтобы задать разные стили. Например, добавим класс для выделения иконки цветом.
const StyledDashicons = () => (
<div>
<Dashicon icon="thumbs-up" className="icon-positive" />
<Dashicon icon="thumbs-down" className="icon-negative" />
</div>
);
CSS для классов:
.icon-positive {
color: green;
}
.icon-negative {
color: red;
}
Пример с использованием нескольких иконок в списке
Для более сложного интерфейса, например, панели навигации, можно использовать иконки вместе с текстом для создания кнопок или ссылок.
const IconList = () => (
<ul>
<li>
<Dashicon icon="admin-home" size={24} /> Главная
</li>
<li>
<Dashicon icon="admin-post" size={24} /> Посты
</li>
<li>
<Dashicon icon="media-video" size={24} /> Медиа
</li>
</ul>
);
Заключение
Компонент Dashicon является мощным и простым в использовании средством для добавления иконок в интерфейс WordPress. Благодаря различным настройкам, таким как icon, size и className, вы можете легко адаптировать его к нуждам вашего проекта и создавать информативные и понятные интерфейсы.