Render icon by variables

[Gummibeer]

I want to be able to render an icon ba variables like <x-fa fal="glass-citrus"/>.

Description

Sometimes I want to dynamically use an icon - for example for file types or whatever and instead of a long if-elseif it would be easier to simply pass in a variable - like <x-fa :fal="'file-'.$type"/>.

Possible implementation

A general component would be needed that picks the correct SVG by the passed variables.

I have such a component in my own project, but mine uses the web-font - it consists of following files:

class

<?php

namespace App\View\Components;

use Illuminate\Support\Str;
use Illuminate\View\Component;
use Illuminate\View\View;

class Icon extends Component
{
    public ?string $style;
    public ?string $icon;

    public function __construct(
        ?string $fal = null,
        ?string $far = null,
        ?string $fas = null,
        ?string $fad = null,
        ?string $fab = null
    ) {
        $this->style = ($fal ? 'fal' : ($far ? 'far' : ($fas ? 'fas' : ($fad ? 'fad' : ($fab ? 'fab' : null)))));
        $this->icon = Str::start($fal ?? $far ?? $fas ?? $fad ?? $fab, 'fa-');
    }

    public function render(): View
    {
        $class = implode(' ', [
            $this->style,
            $this->icon,
            'fa-fw',
        ]);

        return view('components.icon', ['class' => $class]);
    }
}

blade

<i {{ $attributes->merge(['class' => $class]) }}></i>

[owenvoke]

Interesting, I know that Dries is thinking of adding an <x-icon icon=""/> component in the next release of Blade Icons. Would that work for you? Or would you specifically like an x-fa solution?

[Gummibeer]

How would <x-icon/> work with Fontawesome?

<x-icon icon="fal glass-citrus"/>

I mean at least for FA two things are required - style and icon. What I like about my idea is it's shortness. If I have to type nearly the same as for the webfont the benefit isn't much anymore. 🤔😟 Except that I don't have to load font files but explode my HTML with inline SVG.^^

[owenvoke]

Like this: <x-icon icon="far-cloud"/>

I guess the benefit of x-icon is that you could switch it out to any other font pretty quickly.

But I'm happy to add a component for x-fa if that's easier

[Gummibeer]

Okay, so I will have to use what's after <x-? So like the component name. If that's the case I'm fine with it.

I will have to create my wrapper component anyways to properly size the SVG always.^^

[Gummibeer]

Closed in favor of basic <x-icon/> component.