Vue3中如何使用Font-Awesome的图标
作者:互联网
在vue3项目中集成font-awesome时遇到了一些坑,写下来让大家避开。
1、npm安装
$ npm i --save @fortawesome/fontawesome-svg-core $ npm i --save @fortawesome/free-solid-svg-icons2、注意(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。更多的可以自行添加。
标签:npm,save,svg,Awesome,Vue3,fortawesome,fontawesome,import,Font 来源: https://www.cnblogs.com/ihugang/p/15471377.html