如何在Vue 3中正确引入并使用Font Awesome图标？

Hey there! Let's get your Font Awesome icons working smoothly in Vue 3. I’ve spotted a few small missteps in your current configuration—here’s how to fix them:

Issues in Your Current Code #

• Your fontawesome-icons.js is exporting the FontAwesomeIcon component, but this file’s only job should be registering icons to the Font Awesome library (no need to export anything here).
• You aren’t importing fontawesome-icons.js in main.js, so the icons you added to the library never get loaded into your app.
• In Task.vue, the icon name is capitalized (Undo)—Font Awesome expects lowercase names here (undo).

Corrected Code Files #

1. Update fontawesome-icons.js #

This file just needs to register your icons to the library—no exports required:

import { library } from "@fortawesome/fontawesome-svg-core";
import { faUndo } from "@fortawesome/free-solid-svg-icons";

// Add your desired icons to the library
library.add(faUndo);

2. Update main.js #

Import your icon registration file to ensure the icons are loaded, then register the component as before:

import { createApp } from 'vue'
import App from './App.vue'
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
// Import the file that registers your icons
import './fontawesome-icons.js'

const app = createApp(App)
// Register the Font Awesome component globally
app.component("font-awesome-icon", FontAwesomeIcon)
app.mount('#app')

3. Fix Task.vue #

Use the lowercase icon name, and you can even simplify the syntax since the icon is registered in the library:

<template>
<div>
  <!-- Option 1: Explicitly specify the icon style -->
  <font-awesome-icon :icon="['fas', 'undo']" />
  
  <!-- Option 2: Shorter syntax (Font Awesome auto-detects the style) -->
  <font-awesome-icon icon="undo" />
</div>
</template>

Extra Tips #

• To add more icons later, just import them in fontawesome-icons.js and add them to the library:

  import { faUndo, faTrash, faCheckCircle } from "@fortawesome/free-solid-svg-icons";
  library.add(faUndo, faTrash, faCheckCircle);
  

• If you’re using brand icons or regular icons, make sure to import from the correct package (e.g., @fortawesome/free-brands-svg-icons or @fortawesome/free-regular-svg-icons) and use the corresponding prefix (fab for brands, far for regular).

内容的提问来源于stack exchange，提问作者aleapoffaith