repository·main·Indexed 41 days ago
https://github.com/lukas-frey/filament-icon-pickerA Filament plugin providing an icon picker form field and table column. It allows users to select icons from any installed Blade-icons kit, with Heroicons supported by default. Features include responsive column layouts, floating or on-top display modes, search result caching, and custom item templates via Blade views.
blade-icons kit. Heroicons are supported out of the box because they are included with Filament.Uploaded icons are stored on the public disk within a directory structure organized by scope. The package automatically registers this directory as a blade-icons set, allowing uploaded files to be used like any other icon in your application.
Storage paths:
storage/app/public/icon-picker-icons/unscoped/{filename}.svgstorage/app/public/icon-picker-icons/{scope}/{filename}.svgNote: Because files are on the public disk, they are directly accessible via the /storage URL. Ensure you restrict upload permissions accordingly.
Custom icons are grouped into a specific set called Custom icons, which appears in the set dropdown.
Key behaviors:
customIconsUploadEnabled() has been called.sets() method to restrict which icon sets are available on a field, the Custom icons set will be hidden unless you explicitly include it in your allowed sets.Uploaded icons are stored on the public disk within directories organized by scope. The package automatically registers these directories as a blade-icons set, allowing uploaded files to function like standard icons.
Storage paths:
storage/app/public/icon-picker-icons/unscoped/{filename}.svgstorage/app/public/icon-picker-icons/{scope}/{filename}.svgSecurity Note: Because files are stored on the public disk, they are directly accessible via the /storage URL. Ensure you restrict upload permissions accordingly.
When a user clicks the upload action, a modal appears with two fields:
My Nice Icon becomes my-nice-icon).Once uploaded, the icon is immediately selected in the field and becomes available in the icon picker.
When creating a custom search results view, you have access to the following Alpine.js properties and methods to manage the UI and icon rendering:
| Name | Description |
|---|---|
resultsVisible | An array of currently visible icons: { id, label, set, custom } |
state | The ID of the currently selected icon |
isLoading | Boolean indicating if icons are still being loaded |
updateState(icon) | Selects an icon (pass one entry from resultsVisible) |
setElementIcon($el, id) | Loads the SVG of an icon into a specific element |
addSearchResultsChunk() | Triggers the rendering of the next chunk of results |
Important Note on Icon Rendering:
Icons are transmitted to the browser as IDs and labels, not as SVG markup. To display an icon, you must call setElementIcon($el, icon.id) on the target element. For performance with large sets, it is recommended to call this when the element scrolls into view using x-intersect.
<div x-intersect="setElementIcon($el, icon.id)"></div>Icons are served via two package-registered endpoints (not via Livewire). Access is secured using an encrypted token issued by the field during rendering.
This token is scoped to specific sets and scopes. A token issued for a specific field or scope cannot be used to access icons from a different scope or a set that the field does not have permission to serve.
academic will match heroicon-o-academic-cap. Because the full ID is searched, you can also search by the icon set prefix (e.g., typing heroicon-s will filter results to solid heroicons).The icon scope is automatically derived from the model's morph class and its primary key. This ensures that icons from different models never share the same scope.
Because the scope is part of the icon name stored in the database, moving a record between tenants (or changing its scope) will not automatically move the associated icon files. To move icons, you must manually move the files on the public disk and update the stored icon names in your database.
The IconPicker field includes built-in validation. When a form is submitted, the component automatically verifies that:
sets()).This validation prevents users from submitting arbitrary or non-existent icon strings from the browser.