在Nuxt3中使用Font Awesome

如何把Font Awesome集成到Nuxt3中使用

安装：

1. 安装Font Awesome图标库核心

yarn add @fortawesome/fontawesome-svg-core

2. 安装Font Awesome免费图标依赖包

yarn add @fortawesome/free-solid-svg-icons
yarn add @fortawesome/free-regular-svg-icons
yarn add @fortawesome/free-brands-svg-icons

安装Pro版本，参考官方文档 Set Up with Vue | Font Awesome Docs。

3. 安装官方提供的在Vue中使用图标库的组件

# for Vue 3.x
yarn add @fortawesome/vue-fontawesome@latest-3

4. 组件引入，编写Nuxt插件，在项目的plugins目录内，添加文件font-awesome.ts，内容如下：

import { library, config } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
// 引入了 free-solid 中的 moon 和 sun
import { faSun, faMoon } from '@fortawesome/free-solid-svg-icons'
// 因为默认添加了 nuxt会造成一些错误，所以不自动添加样式
config.autoAddCss = false
// defineNuxtPlugin 是全局的，不需要手动引入即可使用，不会报错
export default defineNuxtPlugin((nuxtApp) => {
  // 将图标添加到库中
  library.add(faSun, faMoon)
  // 全局注册 font-awesome-icon 组件
  nuxtApp.vueApp.component('font-awesome-icon', FontAwesomeIcon)
})

保存后，接下来，在 nuxt.config.ts 中全局引入 fontawesome-svg-core 自带的样式，假如不引入会造成 svg 图标发生重排，导致页面闪烁。

在nuxt.config.ts 文件中，添加如下内容，保存：

import { defineNuxtConfig } from 'nuxt'

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
	...
	// 添加这一行代码
  css: ['@fortawesome/fontawesome-svg-core/styles.css'],
 
  ...
})

5. 目前我使用的版本是^6.2.1，由于兼容性问题，只按照以上方法配置，使用图标时，会存在报错和渲染异常问题：

// 浏览器报错信息
[Vue warn]: Hydration node mismatch:
- Client vnode: svg 
- Server rendered DOM: <!---->  
  at <FontAwesomeIcon icon= (2) ['fas', 'sun'] > 
  at <Default > 
  ...
        
[Vue warn]: Hydration children mismatch in <div>: server rendered element contains fewer child nodes than client vdom. 
  at <Default > 
  at <Anonymous key="default" name="default" hasTransition=false > 
 	...

// 控制台报错信息
Could not find one or more icon(s) { prefix: 'fas', iconName: 'sun' } {}

解决：参考链接：Github: Using FontAwesome in Nuxt 3 Discussions#3823

在nuxt.config.ts文件中，添加如下内容，保存后重启项目：

import { defineNuxtConfig } from 'nuxt'

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
	...
	// 添加这一部分代码
  build: {
  	transpile: [
       '@fortawesome/vue-fontawesome', // 必须
       '@fortawesome/fontawesome-svg-core', // 必须
       '@fortawesome/free-solid-svg-icons' // 非必须，使用了哪几个图标包，就引入对应的包名
     ]
  }
  
  ...
})

6. 在页面中使用Font Awesome图标

<font-awesome-icon icon="fa-solid fa-sun" />
<font-awesome-icon icon="fa-solid fa-moon" />

官方使用说明文档：

在Vue中使用| Font Awesome Docs

Set Up with Vue | Font Awesome Docs