blade-ui-kit/blade-heroicons

Parameterizable component

krzysztofrewak opened this issue · 4 comments

krzysztofrewak commented

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 commented

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" />
  • 👍1
krzysztofrewak commented

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 commented

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

krzysztofrewak commented

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.

  • 👍1