Icon

Вы просматриваете документацию старой версии MoonShine. Рассмотрите возможность обновления вашего проекта до MoonShine 2.x.

Разделы

# Основы

Для вставки иконок в свои кастомные элементы, можно воспользоваться компонентом 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="purple"/>
<x-moonshine::icon icon="heroicons.academic-cap" color="pink"/>
<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="purple"/>
<x-moonshine::icon icon="heroicons.academic-cap" color="pink"/>
<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, используйте собственные стили