[Vue] Vue 如何使用 Font Awesome ? 安裝,註冊

npm i --save @fortawesome/fontawesome-svg-core

npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/free-regular-svg-icons
npm i --save @fortawesome/free-brands-svg-icons

npm i --save @fortawesome/vue-fontawesome@latest-3

/* import the fontawesome core */
import { library } from '@fortawesome/fontawesome-svg-core'

import { fas } from '@fortawesome/free-solid-svg-icons' // solid 實心
import { far } from '@fortawesome/free-regular-svg-icons' // regular 一般
import { fab } from '@fortawesome/free-brands-svg-icons' // brand 品牌

/* import font awesome icon component */
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

library.add(fas, far, fab) // 把 icon 加入 library

app.component('font-awesome-icon', FontAwesomeIcon)

import './assets/main.css'

import { createApp } from 'vue'
import { createPinia } from 'pinia'

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

/* import the fontawesome core */
import { library } from '@fortawesome/fontawesome-svg-core'

import { fas } from '@fortawesome/free-solid-svg-icons' // solid 實心
import { far } from '@fortawesome/free-regular-svg-icons' // regular 一般
import { fab } from '@fortawesome/free-brands-svg-icons' // brand 品牌

/* import font awesome icon component */
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

library.add(fas, far, fab) // 把 icon 加入 library

const app = createApp(App)

app.component('font-awesome-icon', FontAwesomeIcon)
app.use(createPinia())
app.use(router)

app.mount('#app')

<template>
  <font-awesome-icon icon="fa-solid fa-house" />
</template>