vue3中使用fontawesome svg图标

以前的项目中我使用的都是Material Design Icon，但是这个图标库有个问题，总感觉有些图标的大小不一致，都给了相同的样式，但是呈现出来效果一个大，一个小。
最近发现了一个字体图标库，叫Font Awesome，感觉这个图标库的图标不错，国内访问也很快，下面介绍一下在vue3项目中怎么使用这个图标库。
Font Awesome官网链接：fontawesome.com/v6/search
官网在这里讲了vue中怎么使用：docs.fontawesome.com/web/use-wit…

1.安装

我们老师说，项目中尽量使用svg图标，因为css字体图标有时候可能出问题，所以下面安装Font Awesome的SVG图标：
1.首先安装Font Awesome的SVG核心：

我使用的是pnpm：

pnpm i --save @fortawesome/fontawesome-svg-core

2.安装对应的svg包：

选择Free SVG Icon Package进行安装，除非你家里有矿😂
Free SVG Icon Package中现在有三个包，建议都安装上，因为你可能不知道你要找的图标在哪个包下面。

pnpm add --save @fortawesome/free-solid-svg-icons     
pnpm add --save @fortawesome/free-regular-svg-icons
pnpm add --save @fortawesome/free-brands-svg-icons  //品牌图标

3.安装Font Awesome的vue插件：

我用的时vue3：

pnpm add --save @fortawesome/vue-fontawesome@latest-3

2.进行配置

我网上找到的文章都在main.js中进行了icon的绑定，安装等操作。但是我觉得这不太好，因为main.js是vue中很重要的文件，所以应该保持这个文件简洁，干净。
所以我在plugins目录下建了一个fontawesome.js文件：

// 导入FontAwesomeIcon的vue插件
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
// 从核心导入library
import { library } from '@fortawesome/fontawesome-svg-core'

// 这里导入你需要的图标
import { faHouse, faUser, faUsers, } from '@fortawesome/free-solid-svg-icons'
import { faGithub, faJs, faCss } from '@fortawesome/free-brands-svg-icons'

// 注册图标
library.add(faHouse)
library.add(faUser)
library.add(faUsers)
library.add(faGithub)
library.add(faJs)
library.add(faCss)

// 导出fontawesome的vue插件，一会儿需要在main.js给vue注册成组件
export { FontAwesomeIcon }

在main.js中进行注册:

import { createApp } from 'vue'
import App from './App.vue'
// 从刚才创建的fontawsome.js文件中导入FontAwesomeIcon
import { FontAwesomeIcon } from './plugins/fontawesome.js'
import './style.css'

const app = createApp(App)
// 给vue实例注册FontAwesomeIcon组件
app.component('font-awesome-icon', FontAwesomeIcon)
app.mount('#app')

3.在页面中使用

fontawesome的官网上可以自定义图标的很多样式：

在页面中使用：

<template>
  <div>
    <font-awesome-icon icon="fa-solid fa-house" style="margin-right: 10px"/>
    <font-awesome-icon icon="fa-solid fa-user" style="margin-right: 10px"/>
    <font-awesome-icon icon="fa-solid fa-users" style="margin-right: 10px" />
    <font-awesome-icon icon="fa-brands fa-js" style="color: #FFD43B; margin-right: 10px" />
    <font-awesome-icon icon="fa-brands fa-css" style="color: #B197FC; margin-right: 10px" />
  </div>
</template>

4.效果图