如果自己沒有使用ui框架的話,icon font就要自己處理,我最常用的就是 fontawsome,原因就是看起來比較可愛XD

其實用哪個都可以,但就是要認真看安裝文件就是了。


安裝

fontawsome有提供給vue、react…等很多方式的下載,github文件在這裡。

記住,我們這邊是使用vue3的版本喔!!

$ yarn add @fortawesome/fontawesome-svg-core 
$ yarn add @fortawesome/free-solid-svg-icons
$ yarn add @fortawesome/vue-fontawesome@prerelease 

接下來這兩個就看你會不會使用到,有使用到就可以安裝~ 就是資料夾的概念,有些icon是放在下面這兩個裡面的,要用的話就要安裝。

$ yarn add @fortawesome/free-brands-svg-icons
$ yarn add @fortawesome/free-regular-svg-icons

引入

新增一個檔案plugins/fontawsome.js

import { library } from "@fortawesome/fontawesome-svg-core";
import { faBars } from "@fortawesome/free-solid-svg-icons";
library.add(faBars);

我們在fontawsome的icon庫找到我們想要的icon,然後在第2行引入。

那我要怎麼知道名稱呢?可以參考下面這張圖:

vue3 引入 fontawsome

然後我們把設定好的外掛引入main.js,並且註冊組件:

import { createApp } from "vue";
import App from "./App.vue";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import "@/plugins/fontawsome";

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


在頁面中使用

引入的方式有簡寫的方式,但是我覺得會給後人閱讀不易,所以我們就用寫得最詳細的方式:

要看其他方式一樣看github文件

<font-awesome-icon :icon="['fas', 'bars']" />

所以之後你要使用很多個icon,都要記得先去/plugins/fontawsome.js裡面去引入喔!

vue3 引入 fontawsome
0
0 回復

發表評論

想要加入討論嗎?
請盡情發表您的想法!

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。