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