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