new
Livewire Volt extension for VSCode. Voltage →
maryUI

Icon

Default iconset

All the default icons are powered by Blade Hero Icons and you can use them right away. 

<x-icon name="o-envelope" />
 
<x-icon name="s-envelope" class="w-9 h-9 text-green-500" />
 
<x-icon name="o-envelope" class="w-12 h-12 bg-orange-500 text-white p-2 rounded-full" />

Labels

Messages
Messages 
<x-icon name="o-envelope" label="Messages" />
 
<x-icon name="s-envelope" class="w-9 h-9 text-green-500 text-2xl" label="Messages" />

Alternative iconset

You can install any compatible blade iconset listed here.

Here is an example for FontAwsome and Bootstrap iconsets. 

composer require owenvoke/blade-fontawesome
composer require davidhsianturi/blade-bootstrap-icons
{{-- FontAwsome variants --}}
<x-icon name="fas.cloud" />
<x-icon name="far.circle-play" />
<x-icon name="fab.facebook" />
 
{{-- Bootstrap --}}
<x-icon name="bi.bell-fill" />

Caching

As advised by Blade Icons docs it is a good idea to put icons on cache at the production environment. 

php artisan icons:cache
maryUI
Sponsor