Vue3中导入和使用图标库Font Awesome的实现步骤

npm install @fortawesome/vue-fontawesome @fortawesome/free-solid-svg-icons

yarn add @fortawesome/vue-fontawesome @fortawesome/free-solid-svg-icons

// main.js或main.ts
import { createApp } from 'vue';
import App from './App.vue';
// 引入Font Awesome核心库
import { library } from '@fortawesome/fontawesome-svg-core';
// 引入需要使用的图标包
import { fas } from '@fortawesome/free-solid-svg-icons';
// 引入Vue Font Awesome组件
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';

// 将图标添加到库中
library.add(fas);

const app = createApp(App);
// 全局注册Font Awesome图标组件
app.component('font-awesome-icon', FontAwesomeIcon);

app.mount('#app');

<template>
  <div>
    <font-awesome-icon icon="user" />
  </div>
</template>

<template>
  <div>
    <font-awesome-icon
      icon="user"
      :size="3"
      :style="{ color: 'red' }"
    />
  </div>
</template>

npm install @fortawesome/free-regular-svg-icons

npm install @fortawesome/free-brands-svg-icons

// main.js或main.ts
import { createApp } from 'vue';
import App from './App.vue';
import { library } from '@fortawesome/fontawesome-svg-core';
import { fas } from '@fortawesome/free-solid-svg-icons';
import { far } from '@fortawesome/free-regular-svg-icons';
import { fab } from '@fortawesome/free-brands-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';

library.add(fas, far, fab);

const app = createApp(App);
app.component('font-awesome-icon', FontAwesomeIcon);

app.mount('#app');