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' } {}
Đầ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” />
