Nuxt3和Vue3集成FontAwesome

安装依赖

yarn add @fortawesome/fontawesome-svg-core
yarn add @fortawesome/free-brands-svg-icons
yarn add @fortawesome/free-solid-svg-icons
yarn add @fortawesome/vue-fontawesome

添加 Nuxt 插件

在 Nuxt3 的项目根目录新建 plugins 文件夹文章源自浅海拾贝-https://blog.terwergreen.com/nuxt3-and-vue3-integrated-fonwesome-276ubg.html

然后新建文件 fontawesomePlugin.ts ，代码如下文章源自浅海拾贝-https://blog.terwergreen.com/nuxt3-and-vue3-integrated-fonwesome-276ubg.html

import {library} from '@fortawesome/fontawesome-svg-core'
import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome'
import {faSms, faHome, faBolt, faBook, faJar,faUser,faGear} from '@fortawesome/free-solid-svg-icons'
import {faFacebook, faTwitter} from '@fortawesome/free-brands-svg-icons'

library.add(faTwitter)
library.add(faFacebook)
library.add(faSms)
library.add(faHome)
library.add(faBook)
library.add(faBolt)
library.add(faJar)
library.add(faUser)
library.add(faGear)

export default defineNuxtPlugin((nuxtApp) => {
    // @ts-ignore
    nuxtApp.vueApp.component('font-awesome-icon', FontAwesomeIcon)
})

使用图标

最后在 Vue 组件中直接使用即可，例如文章源自浅海拾贝-https://blog.terwergreen.com/nuxt3-and-vue3-integrated-fonwesome-276ubg.html

<font-awesome-icon :icon="fa-home"/>