owenvoke / blade-fontawesome

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

Blade Font Awesome

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

For a full list of available icons see the SVG directory.

Documentation for older versions

You are reading the documentation for 2.x.

If you're using Laravel 8 or below, please see the docs for 1.x.

Please see the upgrade guide for information on how to upgrade to the latest version.

Requirements

• PHP 8.1 or higher
• Laravel 10.x or higher

Install

Via Composer

composer require owenvoke/blade-fontawesome

Configuration

Blade Font Awesome 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-fontawesome.php config file:

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

Usage

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

<x-fas-cloud/>

You can also pass classes to your icon components:

<x-fas-cloud class="w-6 h-6 text-gray-500"/>

And even use inline styles:

<x-fas-cloud style="color: #555"/>

Icon Sets

Note: These are default prefixes for the specified icon sets, these can all be configured in the config/blade-fontawesome.php file.

Free Icon Sets

• Brands (fab)
• Regular (far)
• Solid (fas)

Pro Icon Sets

• Duotone (fad)
• Light (fal)
• Thin (fat)
• Sharp Regular (far-sharp)
• Sharp Light (fal-sharp)
• Sharp Solid (fas-sharp)
• Custom Kit Icons (fak)

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-fontawesome --force

Then use them in your views like:

<img src="{{ asset('vendor/blade-fontawesome/solid/cloud.svg') }}" width="10" height="10"/>

Font Awesome Pro

Blade Font Awesome supports pro icons using npm for downloads.

To use this, install Font Awesome Pro using npm i --save @fortawesome/fontawesome-pro, and then run the following Artisan command to add the icons to your resources path.

php artisan blade-fontawesome:sync-icons --pro

Blade Font Awesome will then automatically detect and use the pro icons under the resources/icons/blade-fontawesome path.

Because of the sheer number of icons, a small performance hit can be seen when using Pro icons. If you'd like to mitigate this, you can cache the icons. To do this, run the following Artisan command:

php artisan icons:cache

Blade Icons

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

Change log

Please see CHANGELOG for more information on what has changed recently.

Testing

composer test

Contributing

Please see CONTRIBUTING for details.

Security

If you discover any security related issues, please email [email protected] instead of using the issue tracker.

Credits

• Owen Voke
• All Contributors

License

The MIT License (MIT). Please see License File for more information.

Treeware

You're free to use this package, but if it makes it to your production environment you are required to buy the world a tree.

It’s now common knowledge that one of the best tools to tackle the climate crisis and keep our temperatures from rising above 1.5C is to plant trees. If you support this package and contribute to the Treeware forest you’ll be creating employment for local families and restoring wildlife habitats.

You can buy trees here.

Read more about Treeware at treeware.earth.

blade-fontawesome's Issues

Going from release 2.3.0 to release 2.4.0 is a breaking change

Description

With version 2.3.0 I have no problems. When I update to version 2.4.0, I get the error resources/icons/blade-fontawesome/sharp-light] path for the "fontawesome-sharp-light" set does not exist.. I would have expected such changes for a mayor release, but not for a minor release.

Your environment

Laravel 10
PHP 8.1
Had this error when running composer update to update other packages

How to find what icons I can use?

I keep trying things like:

fas-fa-dog

fas-fa-wrench

and any variation of those (like fal-fa-wrench)

But, I keep getting the following error:

Svg by name "fa-wrench" from set "fontawesome-solid" not found.

How do I know what to use/put?

Unable to locate a class or view for component [fas-cloud]

Description

I installed as instructed, but encountered an error

Facade\Ignition\Exceptions\ViewException
Unable to locate a class or view for component [fas-cloud].

Environment

• PHP 7.4.7
• Windows 10

Render icon by variables

I want to be able to render an icon ba variables like <x-fa fal="glass-citrus"/>.

Description

Sometimes I want to dynamically use an icon - for example for file types or whatever and instead of a long if-elseif it would be easier to simply pass in a variable - like <x-fa :fal="'file-'.$type"/>.

Possible implementation

A general component would be needed that picks the correct SVG by the passed variables.

I have such a component in my own project, but mine uses the web-font - it consists of following files:

class

<?php

namespace App\View\Components;

use Illuminate\Support\Str;
use Illuminate\View\Component;
use Illuminate\View\View;

class Icon extends Component
{
    public ?string $style;
    public ?string $icon;

    public function __construct(
        ?string $fal = null,
        ?string $far = null,
        ?string $fas = null,
        ?string $fad = null,
        ?string $fab = null
    ) {
        $this->style = ($fal ? 'fal' : ($far ? 'far' : ($fas ? 'fas' : ($fad ? 'fad' : ($fab ? 'fab' : null)))));
        $this->icon = Str::start($fal ?? $far ?? $fas ?? $fad ?? $fab, 'fa-');
    }

    public function render(): View
    {
        $class = implode(' ', [
            $this->style,
            $this->icon,
            'fa-fw',
        ]);

        return view('components.icon', ['class' => $class]);
    }
}

blade

<i {{ $attributes->merge(['class' => $class]) }}></i>

Slow booting time

Description

I find in one of our servers that if install this package laravel have a big slow booting. More than 4 seconds. If we remove this package all work correctly.

Possible some app provider register? Don't know, or need some php library version. Not errors on logs. Only slow booting.

Your environment

PHP 8.1.8
Laravel 9

Potentially use thecodingmachine/safe as dev dependency

Might be nice to just use https://github.com/thecodingmachine/safe as a dev dependency for consistency and not having to do our own thing (as simple as the change is).

Originally posted by @owenvoke in #51 (comment)

Limit icon sets

Is it possible to limit what icon sets get installed? The Font Awesome Pro package especially has a ton of icons, we're looking at sets for brands, duotone, light, regular, solid, thin, and I only use two of the bunch. The issue I'm having is with Laravel Vapor your whole application is limited to 250MB and right now blade-fontawesome is eating up 77MB alone.

If there's any way in a setting or config file to limit which icon sets get installed instead of all of them?

Use alternative syntax?

Description

blade-ui-kit allows alternative syntax using for accessing icons:

@svg('camera', 'icon-lg')

Is there any alternative syntax here? My use case is this: I have a number of different icons depending on a config array. I'd like to call the icon programmatically using a variable rather than specifically via a component.

Possible implementation

<x-fas-users/>

versus

@svg($menuIcon, ['class' => 'icon-lg'])

Faster Loading

Make blade-fontawesome load faster

Description

Hey guys - great package, but I noticed it really adds a lot of overhead to every Laravel page load (about 500ms in my local environment!). Normally, my local dev page loads are about 300ms, so it reaches 800ms with this package installed.

Possible implementation

It seems to come from these lines in the BladeFontAwesomeServiceProvider ServiceProvider:

$factory->add('fontawesome-brands', array_merge(['path' => __DIR__.'/../resources/svg/brands'], $config->get('blade-fontawesome.brands', [])));
$factory->add('fontawesome-regular', array_merge(['path' => __DIR__.'/../resources/svg/regular'], $config->get('blade-fontawesome.regular', [])));
$factory->add('fontawesome-solid', array_merge(['path' => __DIR__.'/../resources/svg/solid'], $config->get('blade-fontawesome.solid', [])));

Is there a way to speed this up somehow?

Thanks!

FA v6 for Laravel 8

Description

I'm using Laravel 8, blade-fontawesome v1 and Font Awsome v5. Everything is good!

But... I have a designer asking for an icon from FA6 and I'm embarrassed to tell them how long that will take - first upgrading a major Laravel version!

I could, of course, hack it with an inlined SVG but I'd rather not. Is there any way we can get FA6 support on Laravel 8 with this package?

Possible implementation

I appreciate this would have to be a patch for blade-fontawesome v1 but if it's only a small change it would be much appreciated!

Thank you

Twitter X icon

(https://blade-ui-kit.com/blade-icons?set=7&search=x)

Description

I'm looking for the new X icon at Blade UI Kit, when is it going to be added? thanks.

Extra styling on icons, like fa-spin and fa-spin-pulse

Description

Tried adding fa-spin as a class, but no change. Is there a way to do this currently or is this a potential new feature? Could extra styling classes be added via another parameter?

Possible implementation

Suggestion

Sorry, not a bug, but any recommended methods to help PHPStorm recognize the blade components? I'm always getting "Unknown Blade component" error for any of the icon components. Any suggestions would be much appreciated!

Request to tag new release for Font Awesome v6.5.1 (and fix PDF icon bug)

Description

See FortAwesome/Font-Awesome#20017

Possible implementation

Main branch is already up to date. Can you tag a new release? Thanks in advance!

Font-Awesome v6

Thanks for thinking ahead @owenvoke ! 🙏
The package already works with Font-Awesome v6. The new thin set as well as all the new icons are detected by the package. As soon as FA6 is out of alpha/beta the packed-in icons could be replaced but you can already use the FA6 Pro icons with the sync pro icons command. 🎉

Right now you can only sync the pro icons with the command as it has hardcoded fontawesome-pro in it.

blade-fontawesome/src/Commands/SyncProIconsCommand.php

Lines 23 to 25 in 60c1f2b

	$this->directory = (string) ($this->argument('directory') ?? base_path());
	$fullSourcePath = "{$this->directory}/node_modules/@fortawesome/fontawesome-pro/svgs";

Would it be an idea to allow to customize that one as well so that this command could be used to sync the free FA6 icons as well? 🤔

Add support for Font Awesome pro icons

Description

This was suggested by @flowdee on Twitter, it would be nice to be able to support Font Awesome icons for Pro users.

I currently don't use Font Awesome pro so I wouldn't be able to test this. Also, the Font Awesome licence states that the icons shouldn't be included in open source (although they are looking into how this could be possible).

Possible implementation

I'm not really sure how this would work as it needs to include the icons in the package somehow. 🤔

Components not seen after installation

Description

Bug with the package, components are not seen in Laravel 10, blade-ui-kit/blade-icons 1.5 correctly installed. The bug doesn’t appear with another package designed for Blade Icons.
No error at installation.

Tried with the documentation example without success.

Your environment

PHP 8.2
Windows 11 with Laragon
Phpstorm

Add CI for auto-updating icons

Description

Add a new CI workflow that runs daily and checks for Font Awesome releases, downloads the icons, and opens a PR with the updates.

Possible implementation

This can be done using a scheduled GitHub Action that checks the GitHub Releases for Font Awesome. This can be daily using 0 0 * * * for the cron.

The link to download releases for desktop (which are smaller) is:

https://use.fontawesome.com/releases/v{$version}/fontawesome-free-{$version}-desktop.zip
// or
https://github.com/FortAwesome/Font-Awesome/releases/download/{$version}/fontawesome-free-{$version}-desktop.zip

Then extract the contents of the svgs directory to dist in this repo, run the bin/compile.sh, and it should be good to open the PR. 👍

Font-Awesome v6.2.0

Thank you @owenvoke for the great package.
I saw "resources/svg" already updated to v6.2.0 but when I fresh install via composer it still using v.6.0.0.
How to use the latest version?

Example for plain CSS

Description

Hi, great package it has helped me save a ton of bandwidth going from CSS/font files to SVGs!

What about adding an example for non-tailwind users so that the icon does not appear as 0x0 px?

Possible implementation

<x-fas-cloud style="width: 1rem; height: 1rem;" />

`2.x` version missing

I guess 2.x (as mentioned in README.md) version seems to be missing, or is it yet to be tagged?

Path to Sharp icons is incorrect

Description

The path to the sharp icons is incorrect, Font Awesome publishes it as "sharp-solid" but this package expects it to be just "sharp".

I would have made a pr for the change, but I wasn't sure how you'd want to handle the solid aspect as I presume they may have set it that way in preparation for sharp-light, sharp-thin, etc (it does say coming soon to these on the site).