在 Nuxt3 中使用 Font Awesome 图标
Nuxt3 Tips
Font Awesome
共499个字，阅读时间
2 分钟
版权声明：本文为博主原创文章，遵循
CC 4.0 BY-SA
版权协议，转载请附上原文出处链接和本声明。
在 Nuxt3 中使用 Font Awesome 图标
Font Awesome 是世界上最流行和最易用的图标库，让我们在 Nuxt3 中使用它吧。
安装
图标库核心
首先我们安装 Font Awesome 图标库核心：
yarn add @fortawesome/fontawesome-svg-core
图标库
接着我们安装所有的免费的图标：
yarn add @fortawesome/free-solid-svg-icons
yarn add @fortawesome/free-regular-svg-icons
yarn add @fortawesome/free-brands-svg-icons
当然，如果你使用的是 Pro 版本的 Font Awesome，想使用完整的图标库，可以见此处。
vue 组件
由于 Nuxt3 是 vue3 版本语法，所以我们安装时必须使用:
# for Vue 3.x
yarn add @fortawesome/vue-fontawesome@latest-3
到此所有的 Font Awesome 包都安装完成了，接下来我们开始在 Nuxt3 中使用。
在 Nuxt3 中使用
在 Nuxt3 应用的项目的 plugins 目录内，添加一个文件 fortawesome.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)
})
保存后重新启动，这样这个 plugin 会被自动的注册到 Nuxt3 应用中。
接下来还有最重要的一步，即在 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'],
})
这样，我们就可以在 Nuxt3 应用中使用 Font Awesome 图标了。
<font-awesome-icon icon="fa-solid fa-sun" />
<font-awesome-icon icon="fa-solid fa-moon" />