Weave Code
Blade Icons Laravel Package
blade-ui-kit/blade-icons
Use SVG icons in Laravel Blade with simple components and directives. Convert SVG files into <x-icon-... /> tags or @svg() calls, add classes/attributes easily, and plug in many third‑party icon set packages for quick, consistent icons across your app.
A package to easily make use of SVG icons in your Laravel Blade views.
Frequently asked questions about Blade Icons
- How do I install Blade Icons in Laravel?
- Run `composer require blade-ui-kit/blade-icons` and publish the config with `php artisan vendor:publish --tag=blade-icons`. This sets up the default SVG directory and configuration in `config/blade-icons.php`.
- Can I use Blade Icons with Tailwind CSS?
- Yes, Blade Icons fully supports Tailwind. Pass utility classes like `w-6 h-6` or `text-red-500` directly to the component or `@svg` directive for dynamic styling.
- What Laravel versions does Blade Icons support?
- Blade Icons works with Laravel 8+ and Blade 3.x. It’s tested against the latest stable Laravel releases, but always check the package’s `composer.json` for version constraints.
- How do I add third-party icon sets like Heroicons?
- Install the official package (e.g., `blade-heroicons`) via Composer. Configure it in `config/blade-icons.php` under the `iconSets` array, then use icons like `<x-heroicon-home />`.
- Should I optimize SVGs before using them with Blade Icons?
- Yes, unoptimized SVGs can bloat your bundle. Use tools like `svgo` or Laravel Mix to pre-process SVGs during build. Store optimized files in `resources/svg` or a CDN for best performance.
- How do I handle missing icons gracefully?
- Blade Icons throws a `MissingIconException` if an SVG isn’t found. Catch it in your `AppServiceProvider` or use a fallback SVG by extending the package’s `IconResolver` class.
- Can I use Blade Icons in Livewire or Inertia.js?
- Absolutely. Blade Icons works seamlessly with Livewire (via Blade components) and Inertia.js (since it renders Blade views). Components like `<x-icon-camera />` will render in both contexts.
- What’s the best way to organize large icon sets?
- For large sets, group SVGs in subdirectories (e.g., `resources/svg/navigation/`) and reference them with dot notation: `@svg('navigation.home')`. Use the `iconSets` config to alias paths if needed.
- Does Blade Icons work with Vite or Webpack?
- Yes, SVGs can be processed through Vite or Webpack. Use `@vite(['resources/svg/...'])` in your Blade files or configure Laravel Mix to handle SVG imports for optimized asset pipelines.
- What are the alternatives to Blade Icons for Laravel?
- Alternatives include `laravel-svg` (for inline SVGs), `fontawesome` (for icon fonts), or `heroicons` (standalone). Blade Icons stands out for its Blade-native component approach and extensibility with third-party icon sets.
Weaver
How can I help you explore Laravel packages today?