Use custom img url for icon instead of canned component

[malantech]

It would be cool if I could use a URL of an icon like this <flux:navlist.item icon="{{ $system->icon_url }}" because if I add the icon within the navlist.item the position of it overlaps the text. i.e.,

        @foreach($systems as $system)
            @if($system->services->isNotEmpty())
                <flux:navlist.item icon="{{ $system->icon_url }}"
                    href="{{ route('category', ['slug' => str_replace(' ', '-', strtolower($system->name)), 'system_id' => $system->id]) }}"
                    class=" link_font_color hover-background">
                    <img src="{{ $system->icon_url }}" alt="{{ $system->name }}" class="mr-2 w-10 h-10 @if(session('system') === $system->id)  active_font_color font-bold  @else link_font_color @endif hover-background">
                    {{ $system->name }}
                </flux:navlist.item>
            @endif
        @endforeach
        </flux:navlist>```

[ju5t]

I would prefer component slots rather than passing urls. We usually use inline svg's or FontAwesome, so urls would be a bit iffy. Something along the lines of this would work for everyone:

@if ($icon instanceof ComponentSlot)
    <div class="flux magic here">
        {{ $icon }}
    </div>
@endif

[joshhanley]

Thanks for reporting! We have converted this issue to a feature request for now, so we can focus on fixing any bugs first.

[timgavin]

You can easily create a Font Awesome SVG and just pass thru the file name as a prop.

views/flux/icon/flag.blade.php

{{-- This is the equivalent of `far fa-flag` --}}
@php
    $attributes = $unescapedForwardedAttributes ?? $attributes;
@endphp

@props([
    'variant' => 'outline',
])

@php
    $classes = Flux::classes('shrink-0')->add(
        match ($variant) {
            'outline' => '[:where(&)]:size-6',
            'solid' => '[:where(&)]:size-6',
            'mini' => '[:where(&)]:size-5',
            'micro' => '[:where(&)]:size-4',
        },
    );
@endphp

{{-- Your SVG code here: --}}
<svg {{ $attributes->class($classes) }} data-flux-icon fill="currentColor" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
    <path d="M48 24C48 10.7 37.3 0 24 0S0 10.7 0 24L0 64 0 350.5 0 400l0 88c0 13.3 10.7 24 24 24s24-10.7 24-24l0-100 80.3-20.1c41.1-10.3 84.6-5.5 122.5 13.4c44.2 22.1 95.5 24.8 141.7 7.4l34.7-13c12.5-4.7 20.8-16.6 20.8-30l0-279.7c0-23-24.2-38-44.8-27.7l-9.6 4.8c-46.3 23.2-100.8 23.2-147.1 0c-35.1-17.6-75.4-22-113.5-12.5L48 52l0-28zm0 77.5l96.6-24.2c27-6.7 55.5-3.6 80.4 8.8c54.9 27.4 118.7 29.7 175 6.8l0 241.8-24.4 9.1c-33.7 12.6-71.2 10.7-103.4-5.4c-48.2-24.1-103.3-30.1-155.6-17.1L48 338.5l0-237z" />
</svg>

<flux:menu.item icon="flag" onclick="Livewire.dispatch('openModal', { component: 'media.report', arguments: {{ json_encode(['post' => $post->ulid]) }} })">
    Report Photo
</flux:menu.item>

How to

1. Create a new icon file at resources/views/flux/icon/icon-name.blade.php
2. Paste the following code from the Flux docs into the file

@php $attributes = $unescapedForwardedAttributes ?? $attributes; @endphp

@props([
    'variant' => 'outline',
])

@php
$classes = Flux::classes('shrink-0')
    ->add(match($variant) {
        'outline' => '[:where(&)]:size-6',
        'solid' => '[:where(&)]:size-6',
        'mini' => '[:where(&)]:size-5',
        'micro' => '[:where(&)]:size-4',
    });
@endphp

{{-- Your SVG code here: --}}
<svg {{ $attributes->class($classes) }} data-flux-icon aria-hidden="true" ... >
    ...
</svg>

3. Go to FontAwesome and find your icon. Then click on it and copy the SVG code.
4. Replace the boilerplate code with your SVG code

// replace this with your SVG code
<svg {{ $attributes->class($classes) }} data-flux-icon aria-hidden="true" ... >
    ...
</svg>

5. Finally, add the following back to your SVG code and you're done. Notice that I've included fill="currentColor", which allows you to color the icon.

{{ $attributes->class($classes) }} data-flux-icon aria-hidden="true" fill="currentColor"

[jeffchown]

IMHO, @timgavin 's reply should be the correct answer. One of Flux's key strengths is its composability. This means we have the tools to extend it/build things using the Flux components as building blocks.

If we try to alter/update the core Flux components to handle too many use-cases, Flux will become complicated and bloated (like some other UI's out there).

I think one of Flux's strengths is its structural simplicity (meant as a big compliment) - making the composability possible. I admit it took me a minute to get used to the principles used in the design of Flux, but once I did, it's been fun to see how I can combine the components to build what I want/need.