Weave Code
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+.
Official collection of Flowbite SVG icons in Blade
Frequently asked questions about Flowbite 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.
Weaver
How can I help you explore Laravel packages today?