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。更多的可以自行添加。