DEV Community

Cover image for Using FontAwesome Icons with Nuxt 3
Cecelia Martinez
Cecelia Martinez

Posted on • Updated on

Using FontAwesome Icons with Nuxt 3

FontAwesome provides 2,000+ free icons for use in your projects. Here's how to get started using them in your Nuxt 3 app, including how to improve performance by only importing the icons you need.

This is the same configuration I use in my own website, and you can see the full source code at the GitHub repo here.

Installation

Run the following command to add the vue-fontawesome component.

npm i --save @fortawesome/vue-fontawesome@latest-3
Enter fullscreen mode Exit fullscreen mode

You'll also need to install the icon package(s) you want to use. For my project, I add the svg-core and free-brands-svg-icons packages.

npm i --save @fortawesome/fontawesome-svg-core
npm i --save @fortawesome/free-brands-svg-icons
Enter fullscreen mode Exit fullscreen mode

After installation, my dependencies in package.json look like this:

"dependencies": {
    "@fortawesome/fontawesome-svg-core": "^6.2.1",
    "@fortawesome/free-brands-svg-icons": "^6.2.1",
    "@fortawesome/vue-fontawesome": "^3.0.2"
  }
Enter fullscreen mode Exit fullscreen mode

Configuration

To use FontAwesome icons in Nuxt 3, you'll need to add the following to css array in your nuxt.config file.

  css: [
    '@fortawesome/fontawesome-svg-core/styles.css'
  ]
Enter fullscreen mode Exit fullscreen mode

Next, create a plugins directory in the root of your Nuxt 3 app and create a fontawesome.js file inside.

This file is where we'll register icons into our library and add the <font-awesome-icon> component so it will automatically import in all our Nuxt pages and components.

Subsetting for Performance

If you are only using a few icons, you can subset which icons are added to the library to improve performance. In this example, I'm using the TwitterSquare, Twitch, and GitHubSquare icons only, so there's no need to install the entire library.

In my fontawesome.js file below, I'm only importing the icons I need from @fortawesome/free-brands-svg-icons, then passing those values through to library.add().

import { library, config } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { faTwitterSquare, faTwitch, faGithubSquare } from '@fortawesome/free-brands-svg-icons'

library.add(faTwitterSquare, faTwitch, faGithubSquare)

// This is important, we are going to let Nuxt worry about the CSS
config.autoAddCss = false

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.component('font-awesome-icon', FontAwesomeIcon, {})
})
Enter fullscreen mode Exit fullscreen mode

Then, I'm adding the FontAwesomeIcon component and registering it as <font-awesome-icon> so I can use it in my project.

Importing without Subsetting

If you do want to import the entire icon library, you would import and pass the entire library name instead, like this:

// ...

import { fab } from '@fortawesome/free-brands-svg-icons'
library.add(fab)

// ...
Enter fullscreen mode Exit fullscreen mode

Using Icons

Now, you can use the <font-awesome-icon> component in any of your Nuxt pages or components and pass the icon library and name to the icon prop.

<font-awesome-icon icon="fa-brands fa-twitter-square" />
<font-awesome-icon icon="fa-brands fa-youtube-square" />
<font-awesome-icon icon="fa-brands fa-github-square" />
Enter fullscreen mode Exit fullscreen mode

If you want to use dynamic values, pass the library and icon name as an array to :icon instead. For example, here we are displaying linked icons based on values in a socialLinks array.

<template>
<div id="icons">
    <a v-for="link in socialLinks" :key="link.name" :href="link.url" target="blank">
        <font-awesome-icon :icon="['fab', link.icon]" />
    </a>
</div>
</template>

<script setup>
const socialLinks = [
  {
    name: 'Twitter',
    url: 'https://twitter.com/ceceliacreates',
    icon: 'twitter-square'

  },
  {
    name: 'Youtube',
    url: 'https://www.youtube.com/@ceceliacreates',
    icon: 'youtube-square'
  },
  {
    name: 'GitHub',
    url: 'https://github.com/ceceliacreates',
    icon: 'github-square'
  }

]
</script>
Enter fullscreen mode Exit fullscreen mode

Resources

That should be enough to get you started, but here are links to more documentation on FontAwesome with Nuxt and Subsetting.

Top comments (2)

Collapse
 
sheikhelmoctar profile image
Sheikh El-Moctar

Thank you for your post, but I'm sorry for tell you, It's not working with me.

Collapse
 
pxeba profile image
Pedro Henrique

not working for me either @sheikhelmoctar