Icon

# Основы

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

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

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

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

# Размер

С помощью параметра size можно задать размер иконки.

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

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

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

# Цвет

С помощью параметра color можно задать цвет иконки.

<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"
/>

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