Customizing Flux Brand

Certainly! The main issue here is that the size of the logo is controlled by the class on the inner <div class="size-6 ...">, not on the [data-flux-brand] element itself. When you apply size-10 to [data-flux-brand], you’re changing the size of the entire brand link, not just the logo container.

Here’s how you can customize the logo size in a maintainable way:

1. Use a Custom CSS Class for the Logo Container

Instead of changing the Blade file directly or targeting the whole brand, add a custom class to the logo container <div>. For example:

<div class="logo-container rounded-sm overflow-hidden">

2. Define the Logo Size in Your CSS

In your app.css, add:

.logo-container {
    @apply size-10; /* Or whatever size you want */
}

3. (Optional) Make the Logo Size Configurable

If you want to make the logo size easily adjustable, you can pass a variable from your Blade component:

In your Blade file:

<div class="{{ $logoSize ?? 'size-6' }} rounded-sm overflow-hidden">

When using the component:

<x-flux.brand :logo="$logo" logoSize="size-10" ... />

---

Summary

• Don’t apply size-10 to [data-flux-brand]—target the logo container instead.
• Use a custom class or a configurable variable to control the logo size.
• Update your CSS or Blade component accordingly.

Example:

<a href="{{ $href }}" {{ $attributes->class([$classes, 'gap-2']) }} data-flux-brand>
    <div class="logo-container rounded-sm overflow-hidden">
        <?php if (is_string($logo)): ?>
        <img src="{{ $logo }}" />
        <?php else: ?>
        {{ $logo ?? $slot }}
        <?php endif; ?>
    </div>
    <div class="text-lg text-zinc-900 font-medium truncate">{{ $name }}</div>
</a>

.logo-container {
    @apply size-10;
}

This way, you keep your customization clean and maintainable!