Thêm Font Awesome vào dự án Nuxt 3

Nếu là một Front-end dev chắc hẳn bạn đã từng sử dụng Font Awesome – một thư viện font icons rất đồ sộ và phổ biến. Và khi bạn đang triển khai một dự án Nuxtjs 3 và muốn sử dụng thêm bộ font icons này thì bạn đã đọc hướng dẫn cài đặt Font Awesome cho Nuxt 3 trên trang chủ của hãng.

Tuy nhiên khi cài đặt thành công Font Awesome với dự án Nuxt 3 của mình, tôi đã gặp phải 2 lỗi sau:

Text trong button có sử dụng <FontAwesomeIcon /> bị nhân lên làm 2
Lỗi trong console: Could not find one or more icon(s) { prefix: 'fab', iconName: 'facebook' } {}

Vue.js Fontawesome free brand icons couldn’t be found

Đầu tiên cùng tìm hiểu các cài đặt Font Awesome vào một dự án Nuxtjs 3 nhé:

Cài đặt packages

Sử dụng lệnh tương ứng với packages manager mà bạn đang sử dụng cho dự án của mình nhé:

// For NPM users npm install @fortawesome/fontawesome-free @fortawesome/fontawesome-svg-core @fortawesome/free-brands-svg-icons @fortawesome/free-regular-svg-icons @fortawesome/free-solid-svg-icons @fortawesome/vue-fontawesome --save

// For Yarn users yarn add @fortawesome/fontawesome-free @fortawesome/fontawesome-svg-core @fortawesome/free-brands-svg-icons @fortawesome/free-regular-svg-icons @fortawesome/free-solid-svg-icons @fortawesome/vue-fontawesome


// For Bun users
bun add @fortawesome/fontawesome-free @fortawesome/fontawesome-svg-core @fortawesome/free-brands-svg-icons @fortawesome/free-regular-svg-icons @fortawesome/free-solid-svg-icons @fortawesome/vue-fontawesome

Vâng @fortawesome chứ không phải @fontawsome đâu các bạn nhé.

Tạo thêm Plugin cho nuxtjs

Bạn tạo thêm file trong /plugins/fontawesome.js với nội dung sau:

import { library, config } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { faGithub, faLinkedin, faTwitter } from '@fortawesome/free-brands-svg-icons'

config.autoAddCss = false
library.add(faGithub, faLinkedin, faTwitter)

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

Tiếp theo hãy làm chính xác đoạn này, đây là nội dung khác với tài liệu chính thống được viết trên trang chủ của Font Awesome

Mở nuxt.config.ts (hoặc nuxt.config.js) và thêm vào trong defineNuxtConfig:

export default defineNuxtConfig({
  css: [
    '@fortawesome/fontawesome-svg-core/styles.css'
  ],
  build: {
    transpile: [
      '@fortawesome/fontawesome-svg-core',
      '@fortawesome/free-brands-svg-icons',
      '@fortawesome/free-regular-svg-icons',
      '@fortawesome/free-solid-svg-icons',
      '@fortawesome/vue-fontawesome'
    ]
  }
})

Lưu ý: Đoạn build config sẽ sửa 2 lỗi mà đầu bài mình có nhắc đến

Sử dụng Font Awesome Icon trong dự án

Bây giờ bạn có thể sử dụng icon ở bất kỳ đâu trong dự án của bạn bằng cách thêm font-awesome-icon hoặc FontAwesomeIcon component. Ví dụ: <font-awesome-icon icon=”fa-brands fa-github” />