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
1
2
3
4
2
3
4
# 添加 Nuxt 插件
在 Nuxt3 的项目根目录新建 plugins
文件夹
然后新建文件 fontawesomePlugin.ts
,代码如下
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)
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# 使用图标
最后在 Vue
组件中直接使用即可,例如
<font-awesome-icon :icon="fa-home"/>
1
编辑 (opens new window)
上次更新: 2023/02/22, 13:47:25
- 01
- 解决css部分border被圆角切掉之后圆角的边框消失问题03-18
- 02
- 使用TypeScript开发一个自定义的Node-js前端开发脚手架03-08
- 03
- Github-Actions使用release-please实现自动发版03-06