Weave Code
Heroicons Laravel Package
wireui/heroicons
Laravel package that brings Heroicons to WireUI, providing ready-to-use SVG icon components you can drop into your Blade views and WireUI components for consistent, customizable icons across your app.
The Tailwind Heroicons for laravel blade by WireUI
Frequently asked questions about Heroicons
- How do I install WireUI Heroicons in a Laravel project?
- Run `composer require wireui/heroicons` and ensure Tailwind CSS is installed in your project. No additional configuration is needed—just use the `@heroicon()` directive in Blade views, like `@heroicon('solid/star')`. The package auto-registers with WireUI and Tailwind.
- Does this package work with Laravel 10 and Tailwind CSS v3?
- Yes, WireUI Heroicons is fully compatible with Laravel 10 and Tailwind CSS v3. The package enforces version constraints in its `composer.json` to avoid conflicts. Always check the package’s `require` section for the latest supported versions.
- Can I use these icons in Livewire components?
- Absolutely. Since the icons render via Blade directives (`@heroicon()`), they work seamlessly in Livewire components. The icons are server-rendered alongside your Livewire markup, so no extra client-side setup is required.
- What’s the performance impact of adding this package?
- The package adds minimal overhead—around 100KB of uncompressed SVGs and a Tailwind plugin. For production, ensure your build tool (Vite/Laravel Mix) optimizes and purges unused icons. Test with Lighthouse to confirm no impact on core-web-vitals.
- How do I customize the size or color of Heroicons?
- Use Tailwind’s utility classes directly on the `@heroicon()` directive, like `@heroicon('solid/star', ['class' => 'w-8 h-8 text-blue-500'])` for a larger, blue icon. The package leverages Tailwind’s responsive and theming capabilities out of the box.
- Will this work with Inertia.js and Vue/React?
- For Inertia.js, Blade-rendered icons work fine in server-side components. For client-side Vue/React components, you’ll need to import icons separately using `@heroicons/vue` or `@heroicons/react`, as the Blade directive won’t resolve in the frontend.
- Are there any alternatives to WireUI Heroicons for Laravel?
- Yes. For Tailwind users, consider `@heroicons/react` (client-side) or `laravel-icons` (pure SVG, no Tailwind dependency). If you’re not using Tailwind, packages like `laravel-svg-icons` or manual SVG imports may be better fits.
- How do I update to a new version of Heroicons?
- Run `composer update wireui/heroicons` to pull the latest version. The package follows Heroicons’ official releases, so new icons or fixes are included automatically. Always back up your Blade templates before updating major versions.
- Can I use these icons in non-Tailwind Laravel projects?
- No, this package requires Tailwind CSS for styling and optimization. If your project uses Bootstrap, Bulma, or custom CSS, you’ll need to manually integrate the SVGs or use a different package like `laravel-icons`, which doesn’t depend on Tailwind.
- How do I test Heroicons in a Laravel project before production?
- Install the package in a staging environment, then test by rendering icons in Blade views and Livewire components. Use `npm run dev` to verify the build process includes the icons. Check for rendering issues in different screen sizes and Tailwind themes.
Weaver
How can I help you explore Laravel packages today?