- How do I install Blade Icons in a Laravel project?
- Run `composer require blade-ui-kit/blade-icons` and publish the config with `php artisan vendor:publish --tag=blade-icons`. This generates the `config/blade-icons.php` file, where you can customize paths, default icon sets, and caching behavior. Ensure your SVGs are placed in `resources/svg` (or your custom path) before use.
- Can I use Blade Icons with Laravel Livewire or Inertia.js?
- Yes, Blade Icons works seamlessly with Livewire and Inertia.js as long as you’re using Blade templates. For Vue/React components in Inertia, you’ll need to export SVGs separately or use inline SVG code. The package is Blade-centric, so non-Blade contexts (e.g., API responses) won’t benefit from its directives.
- What Laravel versions does Blade Icons support?
- Blade Icons supports Laravel 8.x and 9.x, with PHP 7.4+ as the minimum requirement. It aligns with Laravel’s LTS support, so you won’t encounter compatibility issues with recent Laravel releases. Always check the package’s [GitHub](https://github.com/driesvints/blade-icons) for updates on newer Laravel versions.
- How do I add third-party icon sets like Heroicons or Font Awesome?
- Install the respective package via Composer (e.g., `composer require blade-ui-kit/blade-heroicons`) and configure it in `config/blade-icons.php` under the `sets` array. Each icon set follows the same Blade component syntax (e.g., `<x-heroicon-solid-camera />`). The package’s modular design makes it easy to mix and match icon sets.
- Will Blade Icons work with Tailwind CSS or other CSS frameworks?
- Yes, Blade Icons is fully compatible with Tailwind CSS. Icons inherit Tailwind utility classes (e.g., `w-6 h-6`) directly, so you can style them dynamically without modifying the SVG markup. For non-Tailwind setups, you can still use inline classes or custom CSS, though Tailwind integration is a key feature.
- How do I handle missing or broken SVG icons in production?
- Blade Icons doesn’t include built-in fallbacks, but you can create a custom Blade directive or component to handle missing icons. For example, wrap `@svg('icon-name')` in a check for file existence or use a placeholder SVG. Alternatively, configure your asset pipeline (e.g., Vite) to log errors if SVGs fail to load.
- Can I lazy-load icons to improve performance?
- Blade Icons doesn’t support lazy-loading out of the box since all SVGs are pre-compiled into static assets. To implement lazy-loading, you’d need to dynamically inject SVGs via JavaScript (e.g., using Intersection Observer) or split your icon sets into smaller bundles. This requires custom logic beyond the package’s core functionality.
- How do I optimize SVGs before using them with Blade Icons?
- Optimize SVGs using tools like SVGO before placing them in `resources/svg`. You can automate this with Laravel Mix or Vite by adding a preprocessing step. For example, configure SVGO in `vite.config.js` or `webpack.mix.js` to strip unnecessary metadata and reduce file sizes before Blade Icons compiles them.
- What’s the difference between `<x-icon-camera />` and `@svg('camera')`?
- Both achieve the same result, but `<x-icon-camera />` is a Blade component (recommended for reusability), while `@svg('camera')` is a directive for inline usage. Components are better for complex icons with attributes, while directives are lighter for simple cases. Choose based on your project’s consistency needs—components enforce a cleaner, more maintainable structure.
- Are there alternatives to Blade Icons for SVG management in Laravel?
- Yes, alternatives include Laravel SVG (for dynamic SVG generation), Heroicons (standalone SVGs with MIT license), or custom solutions like inline SVGs with Tailwind classes. Blade Icons stands out for its Blade integration, third-party icon set support, and seamless Tailwind compatibility. If you need dynamic SVG generation (e.g., charts), Laravel SVG might be a better fit.