FontAwesome proporciona más de 2,000 iconos gratuitos para usar en tus proyectos. Aquí te explicamos cómo comenzar a usarlos en tu aplicación Nuxt 3, incluyendo cómo mejorar el rendimiento importando solo los iconos que necesitas.

Esta es la misma configuración que uso en mi propio sitio web, y puedes ver el código fuente completo en el repositorio de GitHub aquí.

Instalación

Ejecuta el siguiente comando para agregar el componente vue-fontawesome.

npm i --save @fortawesome/vue-fontawesome@latest-3

También necesitarás instalar el paquete de iconos que deseas utilizar. Para mi proyecto, agregué los paquetes svg-core y free-brands-svg-icons.

npm i --save @fortawesome/fontawesome-svg-core
npm i --save @fortawesome/free-brands-svg-icons

Después de la instalación, las dependencias en el archivo package.json se verán así:

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

Configuración

Para usar los iconos de FontAwesome en Nuxt 3, deberás agregar lo siguiente al arreglo css en tu archivo nuxt.config.

css: [
'@fortawesome/fontawesome-svg-core/styles.css'
]

Luego, crea un directorio de plugins en la raíz de tu aplicación Nuxt 3 y crea un archivo fontawesome.js dentro.

Este archivo es donde registraremos los iconos en nuestra librería y agregaremos el componente para que se importe automáticamente en todas nuestras páginas y componentes de Nuxt.

Subconjuntos para mejorar el rendimiento

Si solo estás usando algunos iconos, puedes subconjuntar qué iconos se agregan a la librería para mejorar el rendimiento. En este ejemplo, solo estoy usando los iconos TwitteSquare, Twitch y GitHubSquare, por lo que no hay necesidad de instalar toda la librería.

En mi archivo fontawesome.js a continuación, solo estoy importando los iconos que necesito de @fortawesome/free-brands-svg-icons, luego pasando esos valores a través de 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)

// Esto es importante, vamos a dejar que Nuxt se encargue del CSS
config.autoAddCss = false

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

Luego, agrego el componente FontAwesomeIcon y lo registro como para que pueda usarlo en mi proyecto. Importar sin subconjuntos

Si deseas importar toda la librería de iconos, importarías y pasarías el nombre completo de la librería, así:

// ...

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

// ...

Usando los iconos

Ahora puedes usar el componente en cualquiera de tus páginas o componentes de Nuxt y pasar la librería de iconos y el nombre al atributo icon.

<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" />

Si deseas usar valores dinámicos, pasa la librería y el nombre del icono como un array al atributo . Por ejemplo, aquí estamos mostrando los iconos vinculados en función de los valores de una matriz socialLinks.

<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>

Recursos

Eso debería ser suficiente para que empieces, pero aquí hay enlaces a más documentación sobre FontAwesome con Nuxt y Subsetting.

• FontAwesome con Nuxt Docs
• FontAwesome Subsetting Docs