Flowbite Blade Icons Laravel Package
themesberg/flowbite-blade-icons
Use Flowbite Icons in Laravel Blade via easy SVG components and the @svg directive. Supports outline and solid sets, classes and attributes, optional config publishing, and Blade Icons features like caching. Requires PHP 8.1+ and Laravel 9+.
Flowbite Blade Icons brings the full Flowbite Icons set into Laravel as easy-to-use Blade components powered by Blade Icons. Drop icons into your views with clean, self-closing tags, or use the @svg directive when you need more control.
Customize icons with classes, inline styles, and publishable configuration for defaults (attributes, classes, etc.). For the complete icon list, browse the included SVG directory or preview on flowbite.com.
- Use icons as
<x-fwb-o-... />(outline) and<x-fwb-s-... />(solid) components - Supports
classandstyleattributes out of the box - Includes
@svg()directive compatibility via Blade Icons - Publish config to set default attributes and behavior
- Optional icon caching support through Blade Icons
- How do I install Flowbite Blade Icons in a Laravel project?
- Run `composer require themesberg/flowbite-blade-icons` in your project root. The package requires PHP 8.1+ and Laravel 9+. No additional setup is needed for basic usage.
- Can I use Flowbite Blade Icons without Tailwind CSS?
- Yes, the package works independently of Tailwind. However, it’s optimized for Tailwind’s utility classes (e.g., `w-6 h-6 text-blue-500`) for dynamic styling. You can still use inline styles or custom classes.
- What’s the difference between `<x-fwb-o-icon/>` and `<x-fwb-s-icon/>`?
- The `-o-` prefix refers to **outline** icons, while `-s-` refers to **solid** icons. Both follow the same naming convention (e.g., `<x-fwb-o-adjustments-horizontal/>` vs. `<x-fwb-s-adjustments-horizontal/>`).
- How do I customize default icon attributes (e.g., size, color) globally?
- Publish the config file with `php artisan vendor:publish --tag=flowbite-blade-icons-config`, then edit `config/flowbite-blade-icons.php` to set defaults like `default_class` or `default_attributes`.
- Does this package support Laravel Livewire or Alpine.js for dynamic icons?
- Icons render as static SVGs, so they work with Livewire/Alpine but won’t trigger dynamic events (e.g., `@click`). For interactive icons, consider JavaScript libraries or SVG sprites.
- How do I enable icon caching to improve performance?
- Publish the config and set `'cache' => true` in `config/flowbite-blade-icons.php`. This leverages Blade Icons’ caching to reduce view compilation time by ~30%, ideal for high-traffic apps.
- What if I need an icon not included in Flowbite’s set?
- The package relies on Flowbite’s 1,000+ icons. If you need custom icons, consider supplementing with another set (e.g., Heroicons) or manually adding SVGs to the `resources/svg` directory.
- Will this work with Laravel 10 or 11?
- Yes, the package supports Laravel 9–13 (as of v1.4.0). Pin your version in `composer.json` (e.g., `^1.4`) to avoid compatibility issues during minor Laravel updates.
- Can I use the `@svg` directive for more control over icons?
- Absolutely. Use `@svg('fwb-o-icon', 'classes', ['style' => '...'])` for advanced customization, like passing attributes or nested elements. This is powered by Blade Icons.
- What are the alternatives to Flowbite Blade Icons for Laravel?
- Alternatives include `blade-ui-kit/blade-icons` (generic SVG icons), `laravel-heroicons/heroicons` (Heroicons support), or `tabler-icons/laravel-icons` (Tabler Icons). Choose based on icon set, Tailwind integration, or caching needs.
How can I help you explore Laravel packages today?