Nuxt3和Vue3集成FontAwesome

Terwer 前端开发评论38字数 845阅读2分49秒阅读模式

安装依赖

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"/>
文章源自浅海拾贝-https://blog.terwergreen.com/nuxt3-and-vue3-integrated-fonwesome-276ubg.html
相关文章
  • 扫码加我微信
  • 验证消息请输入:来自你的博客
  • weinxin
  • 我的微信公众号
  • 微信扫一扫与我交流吧
  • weinxin
Terwer
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: