如何在Vue.js中创建Font Awesome本地模板？求技术协助

你的配置问题出在fontawesome.js的导出逻辑和main.js的组件注册环节，以下是修正步骤：

1. 修正 fontawesome.js 的导出方式 #

当前你导出了一个包含library、FontAwesomeIcon和图标的数组，这会导致后续导入时无法正确获取组件。改为直接导出FontAwesomeIcon组件即可：

// models/fontAwesome.js
import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { faUserSecret } from '@fortawesome/free-solid-svg-icons'

// 将图标添加到Font Awesome库
library.add(faUserSecret)

// 导出组件供全局注册使用
export { FontAwesomeIcon }

2. 修正 main.js 的组件注册逻辑 #

之前你错误地将library注册为图标组件，实际上应该注册的是FontAwesomeIcon组件：

// main.js
import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from './App.vue'
import router from './router'

import './assets/main.css'

// 从本地模板导入FontAwesomeIcon组件
import { FontAwesomeIcon } from './models/fontAwesome'

const app = createApp(App)

app.use(createPinia())
app.use(router)
// 全局注册图标组件
app.component('font-awesome-icon', FontAwesomeIcon)
app.mount('#app')

组件中使用示例 #

完成配置后，就可以在任意Vue组件中直接使用图标了：

<template>
  <div>
    <font-awesome-icon icon="user-secret" />
  </div>
</template>

内容的提问来源于stack exchange，提问作者Fernando Oliveira