Компоненты

Favicon

Основы

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

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

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

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

Кастомные 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'),
        'web-manifest' => Vite::asset('favicons/site.webmanifest'),
    ]);
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'),
        'web-manifest' => Vite::asset('favicons/site.webmanifest'),
    ]);
<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'),
    'web-manifest' => asset('favicons/site.webmanifest'),
]" />
<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'),
    'web-manifest' => asset('favicons/site.webmanifest'),
]" />

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

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

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

Для браузера 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' />