# Vue+Vite+Larvel+Inertia 引入 fontawesome 2022-12-06
###### tags: `Vue` `JS` `TS` `前端心得` `重構`
---

由於 fontawesome 有許多不錯的免費 icon 素材可以供使用, 這次重構選擇了相關套件來改動,
他有著好用的切換語系 icon

---

以下內容參考這篇教學:

[[Day5]Vue Cli 無法使用FontAwesome](https://ithelp.ithome.com.tw/articles/10240958)

---

## 使用 Vue+Vite+Larvel+Inertia 混合框架

引入套件時, 通常會用 cli 的方式, 如果是使用 `vscode` 編輯器的話, 按下 `Ctrl+~`
輸入指令

npm install --save-dev @fortawesome/fontawesome-free

---

在 app.js 的地方引入 fontawesome-free 的相關 css, 以及 js 套件

import '@fortawesome/fontawesome-free/css/all.css'
import '@fortawesome/fontawesome-free/js/all.js'

參考文章引入後, 就在 template 上使用惹

---

我使用的是 Vue3, 在要使用的該 fontawesome 的地方, 導入 `<i>` tag

<!-- 導入 fontawesome icon -->
<el-tooltip>
    <i :class="language === 'zh' ? 'iconfont icon-here' : 'iconfont icon-there'"
	class="icon-style fas fa-solid fa-language"></i>
</el-tooltip>

↑ 但根據鐵人以及 [stackoverflow 文章](https://stackoverflow.com/questions/49343425/vue-js-cant-toggle-a-font-awesome-icon)的教學, 以及 fontawesome [官方文件的解釋](https://fontawesome.com/v5/docs/web/use-with/vuejs), 5.5x 的版本在 vue 2.5.x 使用上並不是很便利, 建議使用 SVG core package 的形式...

在 stack overflow 2019 年回應的文章中提到, 當時 fontawesome library 並不知道 Vue, 它會將 code 寫的 `<i>` tag 轉成 `<svg>` tag, 當下的 Vue 會無法去做控制
其中的提到一個解法是使用 `<span>` tag 去包住 `<i>` tag

<span v-if="marked">
    <i  class="far fa-check-square"></i>
</span>

如果是 `<v-if>` 的情況, 使用了 `<span></span>` 的情況仍無法讓 fontawesome 正常運作的話, stack overflow 上的大神提到使用 `key="fa-sort-up"`, 這會強制使 Vue 去重新渲染畫面, 並使 fontawesome 更新 icon, 他的解法如下:

<span key="fa-sort-up" v-if="sort && descending"><i class="fas fa-sort-up"></i></span>
<span key="fa-sort-down" v-else-if="sort"><i class="fas fa-sort-down"></i></span>
<span key="fa-sort" v-else><i class="fas fa-sort"></i></span>

----

不過現在有支援對 vue 的新用法了


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