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 and set up Blade Icons in a Laravel project?
- Run `composer require blade-ui-kit/blade-icons`, then publish the config with `php artisan vendor:publish --tag=blade-icons`. Place your SVG files in `resources/svg` (or a custom path in the config) and start using icons via `<x-icon-name />` or `@svg('name', 'classes')` in Blade views.
- Does Blade Icons work with Laravel 11 and PHP 8.2?
- Yes, Blade Icons is fully compatible with Laravel 8+ and PHP 7.4+. As of 2026, it’s tested up to Laravel 11.x and PHP 8.2, with no breaking changes reported for these versions.
- Can I use third-party icon sets like Heroicons or Font Awesome with this package?
- Absolutely. Install the corresponding package (e.g., `blade-heroicons`) via Composer, and its icons will automatically integrate into Blade Icons. Each package follows the same `resources/svg` structure, so no extra configuration is needed.
- How does Blade Icons handle SVG optimization and performance?
- SVGs are compiled into PHP classes at compile time (via `@svg` directive), eliminating runtime parsing overhead. Pre-compiled icons add minimal overhead, but large icon sets may bloat Blade cache. Use `php artisan blade:cache` to test performance impact.
- Will Blade Icons work with Vite or Webpack asset pipelines?
- Blade Icons assumes SVGs are stored in `resources/svg` and processed by Laravel’s Blade compiler. If using Vite/Webpack, exclude SVGs from processing or configure your asset pipeline to ignore the `resources/svg` directory to avoid conflicts.
- How do I lazy-load icons to improve initial page load performance?
- Blade Icons preloads all icons by default. For lazy-loading, implement custom JavaScript (e.g., Alpine.js or Intersection Observer) to dynamically inject icons when they enter the viewport, or use conditional Blade directives to load icons only when needed.
- Can I customize or animate SVG icons beyond basic styling?
- Basic styling (e.g., `w-6 h-6`) works via Tailwind or inline classes. For animations, use inline CSS or JavaScript (e.g., GSAP or CSS `@keyframes`) directly in the SVG or wrap the icon in a `<div>` with animation classes. Blade Icons doesn’t natively support animations.
- What’s the best way to migrate existing inline SVGs to Blade Icons?
- Audit your Blade views for inline SVGs, move them to `resources/svg`, and replace them with `<x-icon-name />` or `@svg('name', 'classes')`. Use a find-and-replace tool to automate the process, then test edge cases like missing icons or custom attributes.
- Are there alternatives to Blade Icons for SVG icons in Laravel?
- Yes. Alternatives include `laravel-svg` (for dynamic SVG generation), `laravel-heroicons` (Heroicons-specific), or `laravel-view-icons` (for icon components). Blade Icons stands out for its Blade-native integration, extensibility with third-party sets, and zero-runtime-overhead approach.
- How do I handle missing or broken SVG icons in production?
- Blade Icons throws a `BladeIconNotFoundException` if an SVG is missing. Catch this exception in your `AppServiceProvider` or use a fallback icon (e.g., `<x-icon-default />`) by implementing a custom resolver in the config. Test with `php artisan blade:cache` to ensure all icons compile correctly.
Weaver
How can I help you explore Laravel packages today?