Support for Font Awesome (or other icons) when using badges

[Violet-Vibes]

I love the badges but would it be possible to add support for font awesome icons (or in general, any icon provider)? For example, I want to mark events that are done with the icon from https://fontawesome.com/icons/circle-check?s=regular

If possible, I'd love to be able to style the icons as well, for example making it red by assigning it a custom eventstyle (or a separate badgestyle?)

Pseudo-Code:

    public function eventStyles(): array
    {
        return [
            'uncompleted'  => [
                'color'             => '#ff0000' // red
            ],
            'in_progress' => [
                'color'             => '#ffff00' // yellow
            ],
            'completed' => [
                'color'             => '#00ff00' // green
            ],
        ];
    }

    protected function customizeEvent(Event $event): Event
    {
        if ($event->model()->status == EventStatus::UNCOMPLETED) {
            $event->addBadge('fa-regular fa-circle-check')->style('uncompleted');
        }

        if ($event->model()->status == EventStatus::IN_PROGRESS) {
            $event->addBadge('fa-regular fa-circle-check')->style('in_progress');
        }

        if ($event->model()->status == EventStatus::COMPLETED) {
            $event->addBadge('fa-regular fa-circle-check')->style('completed');
        }

        return $event;
    }

[wdelfuego]

I'm personally a big fan of the enormous range of possibilities simple text, unicode and emoji give you, but I understand that having more icon options could be a nice feature.

It's trivial to load the event badges as html content rather than as plain text and I think I'll release that change in an update soon in any case. That will allow for basic badge mark-up and for you to use hero-icons like this:

$event->addBadge('<svg xmlns="http://www.w3.org/2000/svg" style="display:inline-block" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" /></svg>');

Adding support for more icon packs and badge styling wouldn't be as trivial and will probably not be added by me at short notice.

[Violet-Vibes]

I'm personally a big fan of the enormous range of possibilities simple text, unicode and emoji give you, but I understand that having more icon options could be a nice feature.

It's trivial to load the event badges as html content rather than as plain text and I think I'll release that change in an update soon in any case. That will allow for basic badge mark-up and for you to use hero-icons like this:

$event->addBadge('<svg xmlns="http://www.w3.org/2000/svg" style="display:inline-block" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" /></svg>');

Adding support for more icon packs and badge styling wouldn't be as trivial and will probably not be added by me at short notice.

Aye I'm a huge fan of the possibilities already present, being able to load the event badges as html content will be more than enough, I totally forgot about it when I wrote the request. Thanks! :)

[wdelfuego]

I just released 1.5.3 which loads the badges as html so you can do this hero-icons trick. You should be able to do coloring through its style attribute.

I hope to add more badge styling features in a future release. Thanks for your feedback!