# Custom icon sets, file inputs, click outside modals, & more

Published: November 3, 2024

Version: ^1.0.20

<img class="rounded-2xl border" src="/img/blog/1_0_20_icons.png" alt="Horizontally placed Lucide icons of brands like GitHub" />

Flux ships with the entire [Heroicons](https://heroicons.com/) icon set by default. As with anything the Tailwind folks do, it's excellent.

However, at ~400 icons, it's more limited than other alternatives.

If there's an icon in your project that you need but isn't available in Heroicons, it's probably available in [Lucide](https://lucide.dev/icons/).

In version v1.0.20 of Flux, we've shipped a new command to easily import individual Lucide icons into your project:

```bash
php artisan flux:icon
```

You will be prompted to enter the names of any icons you want, and it will import them locally into your project and format them as Blade components ready to use with Flux.

If Lucide doesn't have what you need still, you can just add your icons manually to the following directory in your project:

```
resources/views/flux/icon/your-custom-icon.blade.php
```

[Read more about adding custom icons ->](https://fluxui.dev/components/icon#lucide-icons)

## Custom file input

<img class="rounded-2xl border" src="/img/blog/1_0_20_file_input.png" alt="A custom file input button" />

The browser's default file input element is unstylable and frankly, looks outdated.

We've added our own simple wrapper around the native file input and exposed it through `type="file"` on the input component:

```php
<flux:input type="file" />
```

Of course, we made sure our wrapper works just as well with both the keyboard, mouse, and screen readers as the native input does.

[Read more about file inputs ->](https://fluxui.dev/components/input#file)

## Closing modals by clicking outside

<img class="rounded-2xl border" src="/img/blog/1_0_20_modal.png" alt="A cursor positioned outside a modal" />

Flux uses the browser's new(ish) `<dialog>` element for its modals. There tons of benefits to this, but also a few quirks. One of them being, the `<dialog>` element doesn't respond to clicking outside to close a modal; only the escape key or a close button.

With a sprinkle of custom JavaScript, it was fairly trivial to implement this behavior in Flux. Now, by default, all `<flux:modal>` components will close on _click outside_.

## Clearable inputs and selects

<img class="rounded-2xl border" src="/img/blog/1_0_20_clearable.png" alt="An open searchable select showing a clearable x-mark button in the search input" />

Another small improvement we made in this release was making any _searchable_ input in Flux show a clear button when filled.

We've also made this configurable for inputs that don't show one by default:

```html
<flux:input clearable />

<flux:select variant="listbox" clearable>
    ...
</flux:select>

<flux:command>
    <flux:command.input placeholder="Search..." />
    
    ...
</flux:command
```

## Changelog

* Add flux:icon command to import third-party icons from Lucide for icons Heroicons is missing
* Support clearable buttons on listbox, searchable input, and command input
* Swap deprecated 'color-adjust' CSS property for 'print-color-adjust'
* Fix profile name not being truncated in sidebar layout
* Fix wire:model bugs on checkbox, radios, and switches due to errant input/change events being fired
* Fix dynamic-component bug where attributes are double escaped
* Fix checkbox group using an initial value of null
* Preserve selected display event when selected option element is removed
* Support closing modals by clicking outside
* Add custom file input component

[View full release on GitHub](https://github.com/livewire/flux/releases/tag/v1.0.20)