安裝並使用Vue3+Font Awesome

大家都知道Font Awesome是個好東西！內建很多icon，引入cdn後可以直接貼上html使用，如果框架使用Vue3，則需要安裝並import所需的icon。

安裝

先把core package安裝起來，之後的icon才能使用：

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

安裝所需的icon packages，沒有新台幣加持就先用免費的：

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

安裝Vue3版本的vue-fontawesome：

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

//Vue2的話
npm i --save @fortawesome/vue-fontawesome@latest-2

main.js

把安裝好的package引入main.js中，設定為全局皆可使用這些icon：

/* Set up using Vue 3 */
import { createApp } from 'vue'
import App from './App.vue'

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

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

接著找你要用的那個icon，假設是這個：

右邊選擇vue的程式碼，發現原來它叫fa-house，類型則是fa-solid：

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

這時候在import時要把fa-house改成駝峰式命名faHouse，也因為它是solid所以從free-solid-svg-icons引入：

/* import specific icons */
import { faHouse } from '@fortawesome/free-solid-svg-icons'

把這個icons加進library中，並且掛載到App實例上：

/* add icons to the library */
library.add(faHouse )

createApp(App)
.component('font-awesome-icon', FontAwesomeIcon)
.mount('#app')

之後在Vue中就可以直接貼上html，如果沒跑出來可能要看一下要用的icon是不是免費的：

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

參考資料：
https://fontawesome.com/docs/web/use-with/vue/