Blade Font Awesome 6 Icon

A package to easily make use of Font Awesome 6 in your Laravel Blade views.

Latest Version on Packagist Software License Build Status Style CI Total Downloads

For a full list of available icons see the resources/svg directory or search

Requirements

Install

$ composer require toneflix-code/blade-fontawesome6-free

Usage

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

<x-fa6-circle-check-solid />
<x-fa6s-circle-check />

You can also pass classes to your icon components:

<x-fa6-circle-check-regular class="w-6 h-6 text-gray-500 fill-current"/>
<x-fa6r-circle-check class="w-6 h-6 text-gray-500 fill-current"/>

And even use inline styles:

<x-fa6-500px-brand style="fill: #F00" />
<x-fa6b-500px style="fill: #F00" />

Available Set

The library comes pre-bundled with all of Fontawesome 6 free icons, which you are free to extend with pro icons if you have a license

Available set include:

all      []
regular  [r]
solid    [s]
brands   [b]

If you chose to use the all set you would have to suffix your directive with the appropriate set you require:

<x-fa6-check-solid />

If you are not using a specific set then you would have to add the first letter of the set to the prefix:

<x-fa6r-bell />

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-fontawesome6-free --force

Then use them in your views like:

<img src="" width="10" height="10"/>

HTML <select></select>

You can also make a html <select></select> prefilled with your preferred icon set for convenience.

<x-fa6-select-icon />

The fa6-select-icon requires that you publish the raw SVG icons as assets, refer to the Raw SVG Icons section for details

The fa6-select-icon accepts all HTML select parameters and three optional parameters:

    string "selected": <!-- A string value representing the name of the currently selected icon -->
    string "set": <!-- The name of the required icon set -->
    string "path": <!-- You are also allowed to load icons not presently part of the library, in this case use an absolute path to the required icons directory -->

    <x-fa6-select-icon name="choose_icon" class="form-control" />
    <x-fa6-select-icon selected="circle-check" set="solid" />
    <x-fa6-select-icon selected="circle-check" set="solid" :path="public_path('icons/remix')" />

If you would like to customize how the select field is rendered, you can publish the view:

php artisan vendor:publish --tag=blade-fontawesome6-views --force

You would find the custom view file in: views/vendor/blade-fontawesome6

Helper

The loadSvg() helper method has been provided for convenience to generate [an array of all icons available in your selected set | a raw icon like using the blade directives would do | a url to your icon incase you need to append it directly into a html tag].

The loadSvg() helper requires that you publish the raw SVG icons as assets, refer to the Raw SVG Icons section for details

The loadSvg() helper accepts four optional parameters:

loadSvg(
    string $icon_name = null  // The name of an icon that is currently available in the active set
    string $ICONS_PATH = null // You are also allowed to load icons not presently part of the library, in this case use an absolute path to the required icons directory
    boolean $link = false     // A boolen value indicating whether you want a the raw icon returned or an absolute link to the icon
    boolean $set = 'all'      // The name of the required icon set
}

Blade Icons

Blade Font Awesome 6 Icon uses Blade Icons under the hood. Please refer to the Blade Icons readme for additional functionality.

Testing

$ composer test

Credits

License

This project is licensed under the MIT License (MIT) – see the LICENSE file for details.