UI компоненты

Icon

Основы

Для вставки иконок в свои пользовательские элементы можно использовать компонент moonshine::icon.

Все доступные иконки.

Размер

Используя параметр size, вы можете установить размер иконки.

<x-moonshine::icon icon="heroicons.academic-cap" size="16"/>
<x-moonshine::icon icon="heroicons.academic-cap" size="16"/>

Значение параметра size соответствует размерам в TailwindCSS.

Цвет

<x-moonshine::icon icon="heroicons.academic-cap" color="primary"/>
<x-moonshine::icon icon="heroicons.academic-cap" color="secondary"/>
<x-moonshine::icon icon="heroicons.academic-cap" color="dark-900"/>
<x-moonshine::icon icon="heroicons.academic-cap" color="dark-50"/>
<x-moonshine::icon icon="heroicons.academic-cap" color="primary"/>
<x-moonshine::icon icon="heroicons.academic-cap" color="secondary"/>
<x-moonshine::icon icon="heroicons.academic-cap" color="dark-900"/>
<x-moonshine::icon icon="heroicons.academic-cap" color="dark-50"/>

По умолчанию доступно несколько цветов, но вы можете расширить их, используя свои собственные цветовые классы TailwindCSS.

Настройка

Пользовательский стиль для иконок можно установить с помощью параметра class.

<x-moonshine::icon
    size="10"
    icon="heroicons.academic-cap"
    class="bg-green-500 text-white rounded-full p-2"
/>
<x-moonshine::icon
    size="10"
    icon="heroicons.academic-cap"
    class="bg-green-500 text-white rounded-full p-2"
/>

Сборка MoonShine содержит ограниченный список классов TailwindCSS. Используйте пользовательские стили.