How to Setup Fontawesome Library with Laravel 10, Inertia, and Vue 3

Introduction

Fontawesome is a widely-used icon library that provides a great selection of icons to enhance the visual appeal of your web applications. In this article, we will guide you through the process of setting up the Fontawesome library with Laravel 10, Inertia, and Vue 3. By the end, you'll be able to easily add beautiful icons to your Laravel projects.

Overview

This article will walk you through the steps to integrate the Fontawesome library into your Laravel 10 project that uses Inertia and Vue 3.

To get started, follow the Vue installation guide provided on the official Fontawesome website here.

Please note that if you intend to use the Pro icons, you will need to purchase a Fontawesome license which can be obtained here.

Installation Steps

You can install the required packages by following these steps:

Using npm:

# Install SVG Core (required)
npm i --save @fortawesome/fontawesome-svg-core

# Free icon styles
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/free-regular-svg-icons
npm i --save @fortawesome/free-brands-svg-icons

# Pro icon styles (Paid feature only)
npm i --save @fortawesome/pro-solid-svg-icons
npm i --save @fortawesome/pro-regular-svg-icons
npm i --save @fortawesome/pro-light-svg-icons
npm i --save @fortawesome/pro-thin-svg-icons
npm i --save @fortawesome/pro-duotone-svg-icons
npm i --save @fortawesome/sharp-solid-svg-icons
npm i --save @fortawesome/sharp-regular-svg-icons
npm i --save @fortawesome/sharp-light-svg-icons

# Install the Vue Component (required)
npm i --save @fortawesome/vue-fontawesome@latest-3

Using yarn:

# Install SVG Core (required)
yarn add @fortawesome/fontawesome-svg-core

# Free icon styles
yarn add @fortawesome/free-solid-svg-icons
yarn add @fortawesome/free-regular-svg-icons
yarn add @fortawesome/free-brands-svg-icons

# Pro icon styles (Paid feature only)
yarn add @fortawesome/pro-solid-svg-icons
yarn add @fortawesome/pro-regular-svg-icons
yarn add @fortawesome/pro-light-svg-icons
yarn add @fortawesome/pro-thin-svg-icons
yarn add @fortawesome/pro-duotone-svg-icons
yarn add @fortawesome/sharp-solid-svg-icons
yarn add @fortawesome/sharp-regular-svg-icons
yarn add @fortawesome/sharp-light-svg-icons

# Install the Vue Component (required)
yarn add @fortawesome/vue-fontawesome@latest-3

After the installation, open your resources/js/app.js file and import the required Fontawesome components and icons. For this example we will be installing the user-secret icon found here:

/* import the fontawesome core */
import { library } from '@fortawesome/fontawesome-svg-core'

/* import the fontawesome icon component */
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

/* import specific icons */
import { faUserSecret } from '@fortawesome/free-solid-svg-icons'

/* add icons to the library */
library.add(faUserSecret)

Next, you need to attach the font-awesome-icon component to your Vue app. Place the following code where your app returns createApp:

createApp()
  // ...
  .component('font-awesome-icon', FontAwesomeIcon)
  // ...

Your app.js file should now look like this:

import './bootstrap'
import '../css/app.css'
import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/vue3'
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers'
import { ZiggyVue } from '../../vendor/tightenco/ziggy/dist/vue.m'

/* import the fontawesome core */
import { library } from '@fortawesome/fontawesome-svg-core'

/* import the fontawesome icon component */
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

/* import specific icons */
import { faUserSecret } from '@fortawesome/free-solid-svg-icons'

/* add icons to the library */
library.add(faUserSecret)

const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel'

createInertiaApp({
    title: title => `${title} - ${appName}`,
    resolve: name =>
        resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
    setup({ el, App, props, plugin }) {
        return createApp({ render: () => h(App, props) })
            .use(plugin)
            .use(ZiggyVue, Ziggy)
            .component('font-awesome-icon', FontAwesomeIcon)
            .mount(el)
    },
    progress: {
        color: '#4B5563',
    },
})

Now, you can easily use the font-awesome-icon component within your Vue components as follows:

<font-awesome-icon icon="fa-solid fa-user-secret" />

Conclusion

In this article, we have shown you how to integrate the Fontawesome library into your Laravel 10 project that uses Inertia and Vue 3. By following these steps, you can easily add beautiful icons to enhance your web application's visual appeal. For more details and advanced usage options, refer to the official Fontawesome documentation here.

Feel free to explore more icons and unleash your creativity!