此页面需要javascript支持,请在浏览器中启用javascript

在 Nuxt3 中使用 Font Awesome 图标

Nuxt3 Tips
Font Awesome
共499个字,阅读时间 2 分钟
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接: https://icebreaker.top/articles/2022/7/11-nuxt3-tips-fortawesome

Image

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