Vue3中如何使用Font-Awesome的圖標

在vue3項目中集成font-awesome時遇到了一些坑，寫下來讓大家避開。

1、npm安裝

$ npm i --save @fortawesome/fontawesome-svg-core
$ npm i --save @fortawesome/free-solid-svg-icons

2、注意（vue3）

$ npm i --save @fortawesome/vue-fontawesome@prerelease

這步出錯會導致運行時無法render

3、main.js

import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
createApp(App).component("font-awesome-icon", FontAwesomeIcon).mount("#app");

4、具體引用icon的組件中

import { faArrowUp } from "@fortawesome/free-solid-svg-icons/faArrowUp";
/* import the fontawesome core */
import { library } from "@fortawesome/fontawesome-svg-core";

library.add(faArrowUp);

然后在<template>代碼中

<font-awesome-icon :icon="faArrowUp" class="icon"></font-awesome-icon>

 注意，這里只引用了一個 fa-arrow-up 的icon。更多的可以自行添加。