Add support for Font Awesome pro icons

[owenvoke]

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. 🤔

[skoontastic]

What would it take to make this happen? Would it be possible to stub it out so that we could drop in the FontAwesome Pro SVG icon folders (like "light") into the View folder and reference them from a published config? It appears we would also need to add fill="currentColor" to all of the icons as well.

[owenvoke]

Apologies for the delayed reply, I'm currently on holiday and not checking notifications much.

I've just bought a Font Awesome Pro licence so that I can try and add support to this in a future version of Blade Font Awesome. :+1:

I agree that some sort of stubbed format would be best. Personally I was thinking of basically adding a command that allows you to download the latest version of Pro using your licence key and add it to your storage/app directory. But I'm open for opinions on this. 👌🏻

Something such as:

php artisan blade-fontawesome:update-pro [key]

[rennokki]

I honestly think that it shouldn't sit in storage/app since it's a resource and would better fit in resources/. You can make it resources/vendor/[your-package-name] as it is actively being used by Horizon, Telescope, etc.

There would be the only clean way (i know when dealing with paid stuff) a command that'd add the pro icons locally in the project. 🤷

[owenvoke]

Yes, it should be in resources @rennokki. Thanks for the heads up. :+1: I will work on this when I'm back from holiday (the end of this week).

Looking into this, we might be able to utilise the GraphQL API.

[owenvoke]

Right, I've looked into the GraphQL and it looks like we can't do it through that. 😬 I was hoping that we could generate a token via https://api.fontawesome.com/token, and then append it to the following download URL: https://downloads.fontawesome.com/releases/v5.14.0/fontawesome-pro-5.14.0-desktop.zip?token=${token}

However, it looks like that doesn't work (probably because the token doesn't have that scope).

---

The only other way I can see to do it is to basically make 2 calls as follows:

1. Call to https://fontawesome.com/api/sessions with username and password
2. Call to https://fontawesome.com/releases/5.14.0/desktop/download with the cookie returned by the first call

However, I'm not really a fan of keeping the username and password in the .env or environment, so perhaps it would be better to use flags for the command? 🤔

---

Any thoughts by people would be welcome. 👍🏻

[rennokki]

@owenvoke I have researched it a bit too and found out we got a way to do this using a bearer token, but somehow the download link is not available via the GraphQL API.

To explain it to anyone coming here, you can get a bearer token from the Font Awesome account page: https://fontawesome.com/account#api-tokens (as described here: https://fontawesome.com/how-to-use/graphql-api/auth/token-endpoint)

When trying to make an authorized request, you can do so as it is described here:

$ curl -H "Content-Type: application/json" \
-H "Authorization: Bearer 123.abc.467def" \
-d '{ "query": "{ me { kits { name } } }" }' \
https://api.fontawesome.com

From the Release endpoint, you can then get the download object: https://fontawesome.com/how-to-use/graphql-api/objects/release, but I assume the object does not have a download link.

I have tweeted @fontawesome, waiting for a reply tho: https://twitter.com/rennokki/status/1292802616435576834

Using the cookie session to download

I am not totally against this, but should be used as the last resort. The hard way is that users have to use the username & password instead of tokens, which is much simpler and avoids any security issues.

In the command can be used the $this->password() to ask for password every time, and pass the email as parameter or flag.

Proposal

Using symfony/process to initiate an NPM process and run the npm install (without --save) to download the package, then copy the icons from node_modules accordingly.

[owenvoke]

Unless Font Awesome have a way to retrieve the URL, I think the command with username and password might be easiest. Using symfony/process to pass off to npm seems a bit weird and also would require npm to be installed (albeit most Laravel developers do have it anyway).

However, if there is an API way, then I'd definitely rather that. Both for security, and ease of use. It's a shame you can't just generate a token and use that (as far as I can tell), but oh well. 🤷🏻

---

Scrap all that, I've found a way to do it. 👍🏻

---

So this is what I've come up with so far: https://gist.github.com/owenvoke/35de1db18ec63c3450cdc78847783fff

It basically uses the npm token from Font Awesome, and allows you to download the fonts from there.

Currently it will store the files under resources/blade-icons/blade-fontawesome/packages/svgs/ so it will need to move them up (maybe to like... resources/blade-icons/blade-fontawesome/pro/?

I'm up for any ideas about the storage path naming. 👍🏻 Or if Font Awesome come up with a better way that uses the API token, then that'd probably be better.

[Gummibeer]

How about copy the icons from node_modules/@fortawesome/fontawesome-pro/svgs?

There could be a command like artisan blade-icons:font-awesome:upgrade-pro {directory?} that copies the SVGs from the node_modules into the vendor dir. This command could be part of deployment after yarn install.

I think that's the easiest way. The dev can use the FA package like normal and use the default npm auth. And this package only copies Icons from the node modules into it's own directories or somewhere in the storage or even resources directory.

[rennokki]

@owenvoke Good job on this! I think that the path name should contain the package name. 🤷

[adddz]

Just bumped into this, I'd love to use Font Awesome Pro with Blade Icons! :)

[owenvoke]

@Gummibeer, that is a possibility. I've created an example of this here: https://gist.github.com/owenvoke/869178250e7b823cd18cd70b4393fa78

I do quite like that as it's not a hacky workaround, I guess the majority of Laravel developers will be using Node as well so it doesn't really make much difference with it not being entirely in PHP. You can also then manage the icon versions in a config file (package.json). 👍🏻

[Gummibeer]

That's my point - I'm longer tied to this package version and can use my default behavior and also use the FA if needed with class.

[owenvoke]

Sounds good 👍🏻 I'll implement that in a PR later.

[owenvoke]

Right, the draft PR is live. I'm just planning on rewriting the bin/compile.sh as a PHP action that can be run on the pro directories as well. But going to do that when I have some free time tomorrow. 👍🏻 Hope that works for everyone?

[alexmartinfr]

Perfect solution, can't see any drawback 👍 Thanks for that!

[owenvoke]

Released in v1.4.0 🥳

[adddz]

Thanks @owenvoke!

I noticed the Duotone icons are not working as expected. They are displayed but they don't have the different colors that actually make them 'duotone'. Do we need to define our own classes .fa-primary and .fa-secondary?

[owenvoke]

@adddz, yes, there isn't any styling by default and due to the way they work, they don't seem to work that great (I'd never used duotone icons before). 😬

Looks like you'd need to apply some sort of style like <x-fad-fill-drip class="custom-class"/> and then specify the .custom-class .fa-primary / .custom-class .fa-secondary styles. sigh

If you can think of a better way of implementing this, let me know. 👍🏻 Or feel free to open a new issue regarding it.

[adddz]

@owenvoke Hey Owen, I just spent hours debugging my Laravel app because the loading time of an empty route was very slow, around 600-700ms. I just couldn't understand why. I started copy pasting the folders to a fresh laravel project, one by one and finally found out the issue.

When I copied the resources folder of my app into the fresh app, the fresh app became slow as well. Guess what my friend, it was the icons folder, with the thousands of FontAwesome Pro icons inside.

To be honest I have no idea why that's actually slowing down everything. Does the framework load the content of the resources folder on startup? I had to remove it. The loading time went down to ~50ms without the icons folder.

Hopefully you'll shed a light on this. :)

[owenvoke]

Hi @adddz, this is a performance issue with the underlying Blade Icons package. There's an issue open addressing the concerns, and how it could be resolved with a cache command (I think there is a PR open too). https://github.com/blade-ui-kit/blade-icons/issues/71

[adddz]

Thank you so much @owenvoke. I really spent hours fixing this so I thought it could help someone. Hopefully it'll be fixed because it's almost unusable like this. Hopefully it'll get fixed soon. Thanks Owen! 😊

[aurawindsurfing]

@owenvoke great job with the package! Made my buy Font Awesome! I noticed that @driesvints added option to enable/disable caching 2 days ago: https://github.com/blade-ui-kit/blade-icons/commit/3f6a0475a4b8b7009f8f238e52634577e6f41869

Thanks!

[driesvints]

@aurawindsurfing here's the PR for that: https://github.com/blade-ui-kit/blade-icons/pull/118. Not that this is for disabling components, not caching. I'm still planning to add caching, probably with the cache command PR that's open atm.