【vue3】引入fontawesome图标Icon

&＃x1f388;博客主页&＃xff1a;&＃x1f308;我的主页&＃x1f308;
&＃x1f388;欢迎点赞 &＃x1f44d; 收藏 &＃x1f31f;留言 &＃x1f4dd; 欢迎讨论&＃xff01;&＃x1f44f;
&＃x1f388;本文由 【泠青沼~】 原创&＃xff0c;首发于 CSDN&＃x1f6a9;&＃x1f6a9;&＃x1f6a9;
&＃x1f388;由于博主是在学小白一枚&＃xff0c;难免会有错误&＃xff0c;有任何问题欢迎评论区留言指出&＃xff0c;感激不尽&＃xff01;&＃x1f320;个人主页

进入Terminal&＃xff1a;

npm i --save &＃64;fortawesome/fontawesome-svg-core

&＃x1f31f;二、添加图标包

可以选用免费的图标包来使用

# Free icons styles
npm i --save &＃64;fortawesome/free-solid-svg-icons
npm i --save &＃64;fortawesome/free-regular-svg-icons
npm i --save &＃64;fortawesome/free-brands-svg-icons

&＃x1f31f;三、添加Vue组件

npm i --save &＃64;fortawesome/vue-fontawesome&＃64;latest-3

&＃x1f31f;四、使用 Vue 设置

&＃x1f31f;&＃x1f31f; 4.1、设置库

/* 使用Vue 3设置 */
import { createApp } from &＃39;vue&＃39;
import App from &＃39;./App.vue&＃39;
/* import the fontawesome core */
import { library } from &＃39;&＃64;fortawesome/fontawesome-svg-core&＃39;
/* import font awesome icon component */
import { FontAwesomeIcon } from &＃39;&＃64;fortawesome/vue-fontawesome&＃39;
import { faUserSecret,faHouseChimneyWindow,faWallet,faCircleDollarToSlot,faLayerGroup } from &＃39;&＃64;fortawesome/free-solid-svg-icons&＃39;
import { faUser,faIdBadge,faPenToSquare} from &＃39;&＃64;fortawesome/free-regular-svg-icons&＃39;
/* add icons to the library */
library.add(faLayerGroup,faUserSecret,faUser,faIdBadge,faWallet,faPenToSquare,faHouseChimneyWindow,faCircleDollarToSlot,)
createApp(App)
.component(&＃39;font-awesome-icon&＃39;, FontAwesomeIcon)
.mount(&＃39;#app&＃39;)


&＃x1f31f;&＃x1f31f; 4.2、调用图标

//icon绑定变量&＃xff0c;最后转换为字符串
<font-awesome-icon class&＃61;"icon" :icon&＃61;"item.meta.iconcls&＃43;&＃39;&＃39;" />
<span>{{item.name}}span>
<style>
.icon{
color: #90d7ec;
margin-right: 5px;
}
style>