Как добавить значок в заголовок страницы на FilamentPHP?

Если вы внимательно посмотрите на определение функции, то увидите, что можете вернуть Htmlable. Сделав это, вы сможете визуализировать HTML или даже уценку:

use Illuminate\Contracts\Support\Htmlable;
use Illuminate\Support\HtmlString;

...

public function getTitle(): string | Htmlable
{
    return new HtmlString('
        <span>Example</span>
        <svg xmlns = "http://www.w3.org/2000/svg" width = "124.13" height = "128" viewBox = "0 0 256 264"><path fill = "#FF2D20" d = "M255.856 59.62c.095.351.144.713.144 1.077v56.568c0 1.478-.79 2.843-2.073 3.578L206.45 148.18v54.18a4.135 4.135 0 0 1-2.062 3.579l-99.108 57.053c-.227.128-.474.21-.722.299c-.093.03-.18.087-.278.113a4.15 4.15 0 0 1-2.114 0c-.114-.03-.217-.093-.325-.134c-.227-.083-.464-.155-.68-.278L2.073 205.938A4.128 4.128 0 0 1 0 202.36V32.656c0-.372.052-.733.144-1.083c.031-.119.103-.227.145-.346c.077-.216.15-.438.263-.639c.077-.134.19-.242.283-.366c.119-.165.227-.335.366-.48c.119-.118.274-.206.408-.309c.15-.124.283-.258.453-.356h.005L51.613.551a4.135 4.135 0 0 1 4.125 0l49.546 28.526h.01c.165.104.305.232.454.351c.134.103.284.196.402.31c.145.149.248.32.371.484c.088.124.207.232.279.366c.118.206.185.423.268.64c.041.118.113.226.144.35c.095.351.144.714.145 1.078V138.65l41.286-23.773V60.692c0-.36.052-.727.145-1.072c.036-.124.103-.232.144-.35c.083-.217.155-.44.268-.64c.077-.134.19-.242.279-.366c.123-.165.226-.335.37-.48c.12-.118.269-.206.403-.309c.155-.124.289-.258.454-.356h.005l49.551-28.526a4.13 4.13 0 0 1 4.125 0l49.546 28.526c.175.103.309.232.464.35c.128.104.278.197.397.31c.144.15.247.32.37.485c.094.124.207.232.28.366c.118.2.185.423.267.64c.047.118.114.226.145.35m-8.115 55.258v-47.04l-17.339 9.981l-23.953 13.792v47.04l41.297-23.773zm-49.546 85.095V152.9l-23.562 13.457l-67.281 38.4v47.514zM8.259 39.796v160.177l90.833 52.294v-47.505L51.64 177.906l-.015-.01l-.02-.01c-.16-.093-.295-.227-.444-.34c-.13-.104-.279-.186-.392-.3l-.01-.015c-.134-.129-.227-.289-.34-.433c-.104-.14-.227-.258-.31-.402l-.005-.016c-.093-.154-.15-.34-.217-.515c-.067-.155-.154-.3-.196-.464v-.005c-.051-.196-.061-.403-.082-.604c-.02-.154-.062-.309-.062-.464V63.57L25.598 49.772l-17.339-9.97zM53.681 8.893L12.399 32.656l41.272 23.762L94.947 32.65L53.671 8.893zm21.468 148.298l23.948-13.786V39.796L81.76 49.778L57.805 63.569v103.608zM202.324 36.935l-41.276 23.762l41.276 23.763l41.271-23.768zm-4.13 54.676l-23.953-13.792l-17.338-9.981v47.04l23.948 13.787l17.344 9.986zm-94.977 106.006l60.543-34.564l30.264-17.272l-41.246-23.747l-47.489 27.34l-43.282 24.918z"/></svg>
    ');
}

Другие примеры его использования вы можете увидеть в документации Filament. Например здесь.

Документация по API Laravel:

• HtmlString
• Htmlable

Обновлено:

Кажется, вы тоже можете это сделать:

public function getTitle(): string | Htmlable
{
    $svg = svg('heroicon-o-star')->toHtml();

    return new HtmlString("
        <div class=\"flex items-center\">
            <span>hi</span>
            {$svg}
        </div>
    ");
}

Я написал особенность PHP, которую вы можете повторно использовать в классах страниц Filament по всему проекту, чтобы добавить значок к заголовку. Вы также можете настроить цвет, размер и положение значка (до или после текста заголовка).

В своих проектах на основе Filament я добавляю эту черту в каталог app/Filament/Pages/Concerns.

file: app/Filament/Pages/Concerns/HasHeadingIcon.php

<?php
    
namespace App\Filament\Pages\Concerns;
    
use Illuminate\Contracts\Support\Htmlable;
use Illuminate\Support\Facades\Blade;
use Illuminate\Support\HtmlString;
use Filament\Support\Enums\IconSize;
use Filament\Support\Enums\IconPosition;
    
trait HasHeadingIcon
{
    public function getHeadingWithIcon(
        ?string $heading = null,
        ?string $icon = null,
        string $iconColor = 'primary',
        IconPosition $iconPosition = IconPosition::Before,
        IconSize $iconSize = IconSize::Medium,
    ): string | Htmlable
    {
        $color = "--c-600: var(--{$iconColor}-600);";
    
        $margin = ($iconPosition === IconPosition::Before)
            ? 'margin-inline-end: .5rem;'
            : 'margin-inline-start: .5rem;';
    
        $size = match($iconSize) {
            IconSize::Small => '1.4rem',
            IconSize::Medium => '1.75rem',
            IconSize::Large => '2.5rem',
        };
    
        $dimensions = "width: {$size}; height: {$size};";
    
        $iconStyle = "{$color} {$margin} {$dimensions}";
    
        $iconComponent = filled($icon)
            ? '<x-'. $icon .' style = "'. $iconStyle .'" class = "inline text-custom-600" />'
            : null;
    
        $headingText = $heading ?? $this->heading ?? $this->getTitle();
    
        if (blank($iconComponent)) {
            return $headingText;
        }
    
        $iconBefore = ($iconPosition === IconPosition::Before)
            ? $iconComponent
            : null;
    
        $iconAfter = ($iconPosition === IconPosition::After)
            ? $iconComponent
            : null;

        return new HtmlString(
            Blade::render('<div class = "flex items-center">
                '. $iconBefore .' '. $headingText .' '. $iconAfter .'
            </div>')
        );
    }
}

Затем вы можете использовать эту особенность на своей странице с филаментом вот так. Это, например, ваша страница со списком ресурсов.

use App\Filament\Pages\Concerns\HasHeadingIcon;
use Filament\Support\Enums\IconSize;
use Filament\Support\Enums\IconPosition;

class ListPosts extends ListRecords
{
    use HasHeadingIcon;

    public function getHeading(): string
    {
        return $this->getHeadingWithIcon(
            heading: 'Blog posts',
            icon: 'heroicon-o-document-text',
            iconColor: 'success',
            iconPosition: IconPosition::Before,
            iconSize: IconSize::Medium
        );
    }
}

В этом примере эти параметры можно изменить, но обязательным является только значок. Остальное по умолчанию. Итак, вы можете сделать это просто следующим образом:

use App\Filament\Pages\Concerns\HasHeadingIcon;

class ListPosts extends ListRecords
{
    use HasHeadingIcon;

    public function getTitle(): string
    {
        return 'This is a page title';
    }

    public function getHeading(): string
    {
        return $this->getHeadingWithIcon(
            icon: 'heroicon-o-document-text',
        );

        // You can provide page heading text to this function directly
        // like in the previous example. However if you do not provide
        // heading text it will then fallback to value of
        // $heading class property. If that property is also not defined
        // then it will try to get text from getTitle() method.
    }
}

Для ясности: метод getTitle() в Filament используется для определения атрибута заголовка страницы. Атрибут удаляется из любого HTML-кода. Если указан метод getHeading(), он будет использоваться для текста заголовка страницы.