Компоненты

Favicon

Основы

Используется для создания шаблонов в MoonShine.

Компонент Favicon предназначен для добавления к html-странице favicon.

 namespaces
use MoonShine\UI\Components\Layout\Favicon;
 
Favicon::make();
 namespaces
use MoonShine\UI\Components\Layout\Favicon;
 
Favicon::make();
<x-moonshine::layout.favicon />
<x-moonshine::layout.favicon />

Родительский компонент: head.

Конфигурация

Самый простой способ изменить favicons — через файл конфигурации config/moonshine.php.

config/moonshine.php
'favicons' => [
    'apple-touch' => '/images/apple-touch-icon.png',
    '32' => '/images/favicon-32x32.png',
    '16' => '/images/favicon-16x16.png',
    'safari-pinned-tab' => '/images/safari-pinned-tab.svg',
],
'favicons' => [
    'apple-touch' => '/images/apple-touch-icon.png',
    '32' => '/images/favicon-32x32.png',
    '16' => '/images/favicon-16x16.png',
    'safari-pinned-tab' => '/images/safari-pinned-tab.svg',
],

Подробнее о конфигурации смотрите в разделе Конфигурация.

Кастомные favicons

Для изменения favicons, необходимо воспользоваться методом customAssets() или указать соответствующий параметр в Blade компоненте.

assets(array $assets);
assets(array $assets);
Favicon::make([
    // ...
])
    ->customAssets([
        'apple-touch' => Vite::asset('favicons/apple-touch-icon.png'),
        '32' => Vite::asset('favicons/favicon-32x32.png'),
        '16' => Vite::asset('favicons/favicon-16x16.png'),
        'safari-pinned-tab' => Vite::asset('favicons/safari-pinned-tab.svg'),
    ]);
Favicon::make([
    // ...
])
    ->customAssets([
        'apple-touch' => Vite::asset('favicons/apple-touch-icon.png'),
        '32' => Vite::asset('favicons/favicon-32x32.png'),
        '16' => Vite::asset('favicons/favicon-16x16.png'),
        'safari-pinned-tab' => Vite::asset('favicons/safari-pinned-tab.svg'),
    ]);
<x-moonshine::layout.favicon :assets="[
    'apple-touch' => asset('favicons/apple-touch-icon.png'),
    '32' => asset('favicons/favicon-32x32.png'),
    '16' => asset('favicons/favicon-16x16.png'),
    'safari-pinned-tab' => asset('favicons/safari-pinned-tab.svg'),
]" />
<x-moonshine::layout.favicon :assets="[
    'apple-touch' => asset('favicons/apple-touch-icon.png'),
    '32' => asset('favicons/favicon-32x32.png'),
    '16' => asset('favicons/favicon-16x16.png'),
    'safari-pinned-tab' => asset('favicons/safari-pinned-tab.svg'),
]" />

Массив ассетов вида:

  • apple-touch - URL адрес для Apple Touch Icon,
  • 32 - URL адрес для 32x32px favicon,
  • 16 - URL адрес для 16x16px favicon,
  • safari-pinned-tab - URL адрес для Safari закрепленной вкладки,

Цвет закрепленной вкладки

Для браузера Safari можно установить цвет закрепленной вкладки с помощью метода bodyColor() или указать соответствующий параметр в blade компоненте.

bodyColor(string $color);
bodyColor(string $color);
Favicon::make([
    // ...
])
    ->bodyColor('#7843e9');
Favicon::make([
    // ...
])
    ->bodyColor('#7843e9');
<x-moonshine::layout.favicon bodyColor='#7843e9' />
<x-moonshine::layout.favicon bodyColor='#7843e9' />