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();
}
Top comments (0)