Parameterizable component

[krzysztofrewak]

Background

The basic form of using the component is super convenient:

<x-heroicon-o-cog class="w-6"></x-heroicon-o-cog>

But I found a problem with more complex usage. I was trying to create section wrapper component, something like this:

<section>
    <div class="rounded-lg bg-white overflow-hidden shadow">
        <div class="bg-white text-sm">
            <div class="flex items-center text-gray-500 bg-gray-100 uppercase text-xs px-6 py-2">
                @if(isset($icon))
                    <div class="mr-2">
                        {{ $icon }}
                    </div>
                @endif
                <span>{{ $title }}</span>
            </div>
            <div class="p-6 z-20">
                {{ $slot }}
            </div>
        </div>
    </div>
</section>

And it can be used as:

<x-section title="Section title">
    <x-slot name="icon">
        <x-heroicon-o-cog class="w-6"></x-heroicon-o-cog>
    </x-slot>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam atque deserunt ducimus eligendi exercitationem inventore perferendis quibusdam quisquam quos veritatis. Ab deserunt dolor eius et, harum laborum praesentium provident quod.
</x-section>

I think that putting a named slot for rendering an optional icon is an overkill. I wanted to achieve something like this:

<x-section title="Section title" icon="cog">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam atque deserunt ducimus eligendi exercitationem inventore perferendis quibusdam quisquam quos veritatis. Ab deserunt dolor eius et, harum laborum praesentium provident quod.
</x-section>

Stupid-simple solution is not working:

<x-heroicon-o-{{ $icon }} class="w-6"></x-heroicon-o-{{ $icon }}>

More complex one, is working, but it's ugly as hell:

<x-dynamic-component :component="'heroicon-o-' . $icon" class="w-6"></x-dynamic-component>

Proposed new feature

It would be extremely convenient to have an option to use some variable to define icons. Something like this:

<x-heroicon icon="cog" class="w-6"></x-heroicon>

I saw that here's an option for "default component" in parent package: https://github.com/blade-ui-kit/blade-icons#default-component but I cannot reuse it with Heroicons.

[driesvints]

Hey @krzysztofrewak the following works for me by using the default component that you mentioned. Are you sure that doesn't works for you?

<x-icon name="heroicon-o-cog" class="w-25 h-25" />

<x-icon :name="'heroicon-o-' . $icon" class="w-25 h-25" />

[krzysztofrewak]

Are you sure that doesn't works for you?

@driesvints, sadly I'm receiving InvalidArgumentException with Unable to locate a class or view for component [icon]. message. But probably then I should somehow register base Icon component?

[driesvints]

It should be available out of the box with the new blade icons release. Are you running Blade Icons v1?

[krzysztofrewak]

And it's solved, thank you. :)

I started new project two weeks ago and I didn't check that 0.3.1 is not newest version available. Sorry for a problem.