Did a bunch of digging around today, without much luck, as most articles still require you to use scss/sass, are referencing older versions of Laravel. Plus the official documentation isn't stellar either. This article should serve as a quick reference to get things running.
First install these:
npm install @fortawesome/fontawesome svg core
npm install @fortawesome/free solid svg icons
Then edit your resources/js/app.js and add these lines:
import { library,dom} from '@fortawesome/fontawesome svg core';
import { faAirFreshener } from '@fortawesome/free solid svg icons/faAirFreshener';
import { faAddressBook } from '@fortawesome/free solid svg icons/faAddressBook';
library.add(faAddressBook, faAirFreshener)
dom.watch()
Make sure your blade app layout file has the import in the <head>:
<! Scripts >
<script src="{{ mix('js/app.js') }}" defer></script>
Now open your blade file of choice and add this code:
<i class="fas fa address book"></i>
<i class="fas fa air freshener"></i>
Make sure npm run watch is using mix and is running. That's it.
Couple of side notes:
I tried using
import { faAirFreshener, faAddressBook } from '@fortawesome/free solid svg icons';
But my public/js/app.js file blew up to 1.51mb. Importing them individually kept the js file to 795kb. I tried a variety of approaches but the above is the only one that didn't make my js file blow up in size.
My webpack.mix.js was updated for tailwindcss so it's not quite the default out of the box version, here's what it looks like:
const mix = require('laravel mix');
mix.disableNotifications()
mix.js('resources/js/app.js', 'public/js')
// .sourceMaps()
.postCss('resources/css/app.css', 'public/css', [
require('postcss import'),
require('tailwindcss'),
]);
if (mix.inProduction()) {
mix.version();
}
