<p><img src="https://images.ctfassets.net/9b1r03jrrwqy/5qPkK4qmMdTnNy4Q3i8Sj3/dfa0a4c42402a389ba109cf8a4a439b9/1_12mr9an2OpclLyxq-v4xQw.png" alt="" /></p>
<p>So you have a Laravel app set up and you want to use the new <a href="https://fontawesome.com/">Font Awesome 5</a> goodness in your Vue.js components. Here’s how you do it.</p>
<p>1. First, install the <a href="https://fontawesome.com/how-to-use/js-component-packages">required packages</a>:</p>
<pre><code class="language-js">yarn add @fortawesome/fontawesome
yarn add @fortawesome/fontawesome-free-solid
yarn add @fortawesome/fontawesome-free-brands
yarn add @fortawesome/vue-fontawesome</code></pre>
<p>We’re going to use the <a href="https://www.npmjs.com/package/@fortawesome/vue-fontawesome">official Vue component</a> to display the Font Awesome icons in this case.</p>
<p>2. Next, import the base packages and regidster the component (in “resources/assets/js/app.js”):</p>
<pre><code class="language-js">import fontawesome from '@fortawesome/fontawesome';
import FontAwesomeIcon from '@fortawesome/vue-fontawesome';
Vue.component('font-awesome-icon', FontAwesomeIcon);</code></pre>
<p>3. (Optional) If you want to import the whole icon set(s), instead of importing each icon manually (still in “resources/assets/js/app.js”):</p>
<pre><code class="language-js">import fas from '@fortawesome/fontawesome-free-solid';
import fab from '@fortawesome/fontawesome-free-brands';
fontawesome.library.add(fas, fab);</code></pre>
<p>4. Use the new “font-awesome-icon” component:</p>
<pre><code class="language-js"><font-awesome-icon icon="spinner" spin v-if="isLoading" />
<font-awesome-icon :icon="['fab', 'digital-ocean']" /></code></pre>
<p>For more instructions on how to use the “font-awesome-icon” component see the <a href="https://github.com/FortAwesome/vue-fontawesome">vue-fontawesome docs</a>.</p>
