blade-ui-kit / blade-heroicons

A package to easily make use of Heroicons in your Laravel Blade views.

Blade Heroicons

A package to easily make use of Heroicons in your Laravel Blade views.

For a full list of available icons see the SVG directory or preview them at heroicons.com. Heroicons are originally developed by Steve Schoger and Adam Wathan.

Requirements

• PHP 8.0 or higher
• Laravel 9.0 or higher

Installation

composer require blade-ui-kit/blade-heroicons

Updating

Please refer to the upgrade guide when updating the library.

Blade Icons

Blade Heroicons uses Blade Icons under the hood. Please refer to the Blade Icons readme for additional functionality. We also recommend to enable icon caching with this library.

Configuration

Blade Heroicons also offers the ability to use features from Blade Icons like default classes, default attributes, etc. If you'd like to configure these, publish the blade-heroicons.php config file:

php artisan vendor:publish --tag=blade-heroicons-config

Usage

Icons can be used as self-closing Blade components which will be compiled to SVG icons:

<x-heroicon-o-arrow-left/>

You can also pass classes to your icon components:

<x-heroicon-o-arrow-left class="w-6 h-6 text-gray-500"/>

And even use inline styles:

<x-heroicon-o-arrow-left style="color: #555"/>

Or use the @svg directive:

@svg('heroicon-o-arrow-left', 'w-6 h-6', ['style' => 'color: #555'])

The solid icons can be referenced like this:

<x-heroicon-s-arrow-left/>

The mini icons can be referenced like this:

<x-heroicon-m-arrow-left/>

And the micro icons can be referenced like this:

<x-heroicon-c-arrow-left/>

Raw SVG Icons

If you want to use the raw SVG icons as assets, you can publish them using:

php artisan vendor:publish --tag=blade-heroicons --force

Then use them in your views like:

<img src="{{ asset('vendor/blade-heroicons/o-arrow-left.svg') }}" width="10" height="10"/>

Changelog

Check out the CHANGELOG in this repository for all the recent changes.

Maintainers

Blade Heroicons is developed and maintained by Dries Vints.

License

Blade Heroicons is open-sourced software licensed under the MIT license.

blade-heroicons's Issues

Control SVG Stroke Width

Is there a way to control the stroke-width property using this library?

I have tried something like <x-heroicon-o-exclamation-circle class="h-12 w-12 stroke-1" /> but I cannot get it to work!

Links:
General: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-width
Tailwind: https://tailwindcss.com/docs/stroke-width

Unable to locate a class or view for component with orchestra/testbench-dusk

See: https://github.com/rapidez/core/actions/runs/986308235 in the artifacts file there are screenshots with:

Any suggestions?

Heroicons 2.0

Heroicons 2.0 was published a few hours ago. Are there plans to update the package to support them?

Cheers

Failed search at official website

Description:

I tried to search an icon but the page doesn't make searching at all.

Here the url : https://blade-ui-kit.com/blade-icons#search

Thank you

Add a floppy disk save icon

Where is the typical floppy disk save icon?

PHPStorm autocompletition

Hello and many thanks for your package!

Do you (or anybody else) know, if its possible, to get autocompletition for the blade tags in phpstorm/intellij?

BUG: Unable to locate a class or view for component

• Library Version: 2.1.0
• Laravel Version: 10.4.1
• PHP Version: 8.1.7
• System: MacOS Ventura (13.2.1, 22D68)

Description:

As I know that if I explained it, no one would believe it, so I decided to record it:
https://www.loom.com/share/74c235a5df1444679f77a2a59c53030a

Steps To Reproduce:

According to above video:

1. composer require ... of the package
2. Try to use any icon.

Parameterizable component

Background

The basic form of using the component is super convenient:

<x-heroicon-o-cog class="w-6"></x-heroicon-o-cog>

But I found a problem with more complex usage. I was trying to create section wrapper component, something like this:

<section>
    <div class="rounded-lg bg-white overflow-hidden shadow">
        <div class="bg-white text-sm">
            <div class="flex items-center text-gray-500 bg-gray-100 uppercase text-xs px-6 py-2">
                @if(isset($icon))
                    <div class="mr-2">
                        {{ $icon }}
                    </div>
                @endif
                <span>{{ $title }}</span>
            </div>
            <div class="p-6 z-20">
                {{ $slot }}
            </div>
        </div>
    </div>
</section>

And it can be used as:

<x-section title="Section title">
    <x-slot name="icon">
        <x-heroicon-o-cog class="w-6"></x-heroicon-o-cog>
    </x-slot>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam atque deserunt ducimus eligendi exercitationem inventore perferendis quibusdam quisquam quos veritatis. Ab deserunt dolor eius et, harum laborum praesentium provident quod.
</x-section>

I think that putting a named slot for rendering an optional icon is an overkill. I wanted to achieve something like this:

<x-section title="Section title" icon="cog">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam atque deserunt ducimus eligendi exercitationem inventore perferendis quibusdam quisquam quos veritatis. Ab deserunt dolor eius et, harum laborum praesentium provident quod.
</x-section>

Stupid-simple solution is not working:

<x-heroicon-o-{{ $icon }} class="w-6"></x-heroicon-o-{{ $icon }}>

More complex one, is working, but it's ugly as hell:

<x-dynamic-component :component="'heroicon-o-' . $icon" class="w-6"></x-dynamic-component>

Proposed new feature

It would be extremely convenient to have an option to use some variable to define icons. Something like this:

<x-heroicon icon="cog" class="w-6"></x-heroicon>

I saw that here's an option for "default component" in parent package: https://github.com/blade-ui-kit/blade-icons#default-component but I cannot reuse it with Heroicons.

high memory usage

• Library Version: latest
• Laravel Version: latest
• PHP Version: all

Description:

The library tries to load all of the icons into the memory in the ServiceProvider which causes to increase the memory consumption of the server.

Steps To Reproduce:

compare the memory usage of a fresh Laravel app with and without having this package installed and autoloaded.

Composer Update failed: The options for the "heroicons" set don't have a prefix defined.

• Library Version: 1.2.0
• Laravel Version: 8.44.0
• PHP Version: 8.0.5

Description:

I have run the composer install command this morning and now face the following issue:

composer install
Installing dependencies from lock file (including require-dev)
Verifying lock file contents can be installed on current platform.
Nothing to install, update or remove
Generating optimized autoload files
composer/package-versions-deprecated: Generating version class...
composer/package-versions-deprecated: ...done generating version class
> Illuminate\Foundation\ComposerScripts::postAutoloadDump
> @php artisan package:discover --ansi

   BladeUI\Icons\Exceptions\CannotRegisterIconSet

  The options for the "heroicons" set don't have a prefix defined.

Steps To Reproduce:

Run a composer install

Do you know of any way round this or why this is happening?

Cannot run Optimize command with Laravel 11

• Library Version: 2.3.0
• Laravel Version: 11.0.5
• PHP Version: 8.3.3

Description:

I upgraded an existing app to Laravel 11, tests ran fine, but it failed during deployment running php artisan optimize. The page works fine when viewed in a browser (the icon appears). I tried to determine if it was something specific to my project but I was able to replicate this in a brand new Laravel 11 project also.

➜  heroicons php artisan optimize

   INFO  Caching framework bootstrap, configuration, and metadata.  

  config ............................................................................................................................... 7.62ms DONE
  events ............................................................................................................................... 0.71ms DONE
  routes ............................................................................................................................... 5.56ms DONE
  views ............................................................................................................................... 28.61ms FAIL

   InvalidArgumentException 

  Unable to locate a class or view for component [heroicon-s-bars-3].

  at vendor/laravel/framework/src/Illuminate/View/Compilers/ComponentTagCompiler.php:311
    307▕         if (Str::startsWith($component, 'mail::')) {
    308▕             return $component;
    309▕         }
    310▕ 
  ➜ 311▕         throw new InvalidArgumentException(
    312▕             "Unable to locate a class or view for component [{$component}]."
    313▕         );
    314▕     }
    315▕ 

      +2 vendor frames 

  3   [internal]:0
      Illuminate\View\Compilers\ComponentTagCompiler::Illuminate\View\Compilers\{closure}(["<x-heroicon-s-bars-3 />", "heroicon-s-bars-3", "", ""])
      +7 vendor frames 

  11  [internal]:0
      Illuminate\Foundation\Console\ViewCacheCommand::Illuminate\Foundation\Console\{closure}(Object(Symfony\Component\Finder\SplFileInfo), "/Users/dwight/Sites/heroicons/resources/views/welcome.blade.php")

Steps To Reproduce:

Create a new Laravel 11 project, add this library.

laravel new heroicons
cd heroicons
composer require blade-ui-kit/blade-heroicons

Add an icon to the welcome page: <x-heroicon-s-bars-3 />

php artisan optimize

Package is missing icons?

• Library Version: 1.4.0
• Laravel Version: 10.13.5
• PHP Version: 8.2.8

Description:

Just one example: Heroicons has a icon called arrow-path.
The package does not have this.

Steps To Reproduce:

composer require blade-ui-kit/blade-heroicons
find vendor/blade-ui-kit/blade-heroicons -type f -name "*path*"

Dramatic performance difference between blade component vs blade helper

There is a huge speed difference depending on which method you use to include an icon using this package.
The two methods I have checked are:

• Blade Component <x-heroicon-o-arrow-right/>
• Blade Helper @svg('hero icon-o-arrow-up')

Using the "helper method" is on average 10 times faster to render than using the "component method". It can be up to 20 times faster on the very first page load.

1st page load values	2nd page load (and after) values

The speed differences aren't much when loading a single icon. However on my website I have a page that lists 80 products per page, with each one having 3 icons. Here it makes sense for me to use @svg as the load time quickly adds up.

Why is using @svg so much faster than <x-heroicon-xxxxx/>?

I have created a sample repo so anyone can easily run the tests for themselves.
https://github.com/MaxGiting/blade-ui-performance

To get the sample repo to work you will need to clone, run composer update, artisan serve and visit the homepage.

Unable to locate a class or view for component [heroicon-o-table]

• Library Version: 0.2.2
• Laravel Version: v8.7.1
• PHP Version: 7.4.10

Description:

Steps To Reproduce:

• Install the package in a Laravel project.
• Add <x-heroicon-o-table/> on view.
• Run php artisan optimize

 InvalidArgumentException

  Unable to locate a class or view for component [heroicon-o-table].

Heroicon O Plus Small Bug

• Library Version: 2.0.10
• Laravel Version: 9.47.0
• PHP Version: 8.0.2

Description:

When using "group-hover:text-white" for the icon class,... the icon does not turn white but stays the same color.

Using other components with the same steps below, the icon turns white, well except for x-heroicon-o-plus as well, and maybe others not sure yet.

Steps To Reproduce:

x-heroicon-o-plus-small class="mr-2 h-5 w-5 rtl:ml2 rtl:mr-0 group-hover:text-white group-focus:text-white text-primary-500"

Icons won't work with directive

• Library Version: 0.1.2
• Laravel Version: 7.23.0
• PHP Version: 7.4.4

Description:

Icons in the package work as expected when using the Laravel 7 component syntax but don't when using the @svg directive or helper. The directive gives a "File does not exist at path" error with a path that ends at the Laravel base level.

Steps To Reproduce:

1. Install the package in a Laravel project.
2. Add <x-heroicon-o-adjustments/> to a view to see the icon.
3. Add @svg('heroicon-o-adjustments') to a view and view the error.

Allow default classes config

I have a default set of custom icons in config/blade-icons.php and this package installed.

I would like to define a default height and width for Hero Icons (e.g. h-5 w-5). Adding this to the class config option of config/blade-icons.php also affects my custom set.

Is there/ could there be a way to define default classes specifically for this set? Seems I can't override the heroicon config set to add it there.

At the moment, the only solution seems to be defining the classes (<x-heroicon-o-home class="w-5 h-5"/>) for every icon individually.

Error message unable to locate component with WSL2

• Library Version: The last
• Laravel Version: 9
• PHP Version: 8.1

Description:

With sail and WSL2, we have this error message

Steps To Reproduce:

We created a repo with only blade-heroicons
Install this repo and run with sail and wsl2
https://github.com/codenco-dev/test-heroicons-wsl2

Bash script to check if you used heroicons that do not exist

Hi, I made a bash script that checks if you use icons that do not (longer) exist. Is this something you might want to add to this repo and if yes, in what way would it be the cleanest? In our project we call it in a makefile and in a github workflow.