repository·main·Indexed 20 days ago
https://github.com/driesvints/blade-heroiconsA Laravel package that integrates the Heroicons set into Blade views as reusable components or via the @svg directive. Supports outline, solid, mini, and micro icon prefixes, and allows publishing raw SVG icons as assets. Requires PHP 8.0+ and Laravel 9.0+.
cheveron. In current versions, these have been corrected to follow the official Heroicons naming convention (chevron). Ensure you update any references using the old spelling to avoid errors.To use Heroicons in your Laravel Blade views, install the package using Composer.
Requirements:
composer require blade-ui-kit/blade-heroiconsWhenever you update the package, you should clear your Laravel view cache to ensure that any changes to the Blade components are correctly reflected in your application.
php artisan view:clearIf you are migrating from the original blade-icons package to blade-heroicons, the Blade component syntax remains unchanged. However, if you were using raw exported icons, you must re-publish them to ensure the new file structure is present.
php artisan vendor:publish --tag=blade-heroicons --forceIf you need to use the icons as raw SVG files (e.g., in <img> tags) rather than Blade components, you can publish them to your vendor directory.
php artisan vendor:publish --tag=blade-heroicons --forceAfter publishing, you can use them in your views like this:
<img src="{{ asset('vendor/blade-heroicons/o-arrow-left.svg') }}" width="10" height="10"/>You can render Heroicons using self-closing Blade components. The component name follows the pattern x-heroicon-{prefix}-{name}.
o-: Outline iconss-: Solid iconsm-: Mini iconsc-: Micro iconsYou can pass CSS classes or inline styles directly to the component to control the icon's appearance.
{{-- Basic usage --}}
<x-heroicon-o-arrow-left />
{{-- With classes --}}
<x-heroicon-o-arrow-left class="w-6 h-6 text-gray-500" />
{{-- With inline styles --}}
<x-heroicon-o-arrow-left style="color: #555" />
{{-- Solid icons --}}
<x-heroicon-s-arrow-left />
{{-- Mini icons --}}
<x-heroicon-m-arrow-left />
{{-- Micro icons --}}
<x-heroicon-c-arrow-left />Upgrading to version 2.0 involves changes to system requirements and the underlying icon set:
The package now uses Heroicons v2.0. Some icons have been removed or renamed. If you attempt to use an icon that no longer exists, Blade Icons will throw an exception. You should audit your icon usage and update names to match the new Heroicons v2.0 set.
Blade Heroicons is built on top of Blade Icons. You can publish a configuration file to customize features like default classes and default attributes.
php artisan vendor:publish --tag=blade-heroicons-configIf you have published the raw icons, you can reference them directly using an <img> tag. The path follows the pattern vendor/blade-heroicons/{icon-name}.svg.
<img src="{{ asset('vendor/blade-heroicons/o-adjustments.svg') }}" width="10" height="10"/>Alternatively, you can use the @svg directive to render icons. This is useful if you prefer a directive-based approach over Blade components.
@svg('heroicon-o-arrow-left', 'w-6 h-6', ['style' => 'color: #555'])