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