How to use Font Awesome 5 SVGs with Laravel Blade

I’ve been a huge fan of Font Awesome from the start and I think they made great improvements with their 5th version.

I’ve not used Font Awesome in a long time and since then I used SVGs almost all the time. So when I decided to use Font Awesome 5 I was a little bit frustrated to see how uneasy it was to use their library.

They push you to use the Javascript integration and I like to avoid Javascript as much as possible for icons.

Today I found a way to use Font Awesome 5 SVGs directly within Blade.

Blade SVG + Font Awesome 5

adamwathan/blade-svg

Blade SVG is a nice little package that adds a new directive for either inline SVG or SVG sprites. As it only supports one spritesheet, I’ll use the inline option.

Here’s how to install it with Composer:

composer require nothingworks/blade-svg

Then publish the config file:

php artisan vendor:publish --provider="BladeSvg\BladeSvgServiceProvider"

Update the config/blade-svg.php to add the icon class to all the SVGs.

<?php

return [
    // ...
    'class' => 'icon', // Add the `icon` class to every SVG when rendered
    // ...
];

Download Font Awesome 5 (Free or Pro) and copy the advanced-options/raw-svg contents to your application resources/assets/svg directory.

You’re ready, you can start using it in your templates:

@svg('brands/github')
@svg('regular/bars', 'text-white')

You’ll see that by default, the icons are really huge and not styled. That’s why I added the icon class. Here’s how I define it in my CSS:

.icon {
    fill: currentColor;
    display: inline-block;
    font-size: inherit;
    height: 1em;
    overflow: visible;
    vertical-align: -.125em;
}

Voilà! You’re good to go.