Vue 3 - Could not find one or more icon(s)-CodePudding

I am fairly new to vue and I am trying to build a simple music player app. I want to use some font-awesome icons for the player's controls (i.e. the 'play' icon) but, I don't seem to be able get it to work. I keep getting this error:

Could not find one or more icon(s) {prefix: 'fas', iconName: 'fa-solid fa-play'}

I have followed the instructions in font-awesome/vue documentation and I have read the other relevant topics in here. Any help would be welcome, thanks!

My code in main.js:

import { createApp } from "vue";
import App from "./App.vue";
import "./index.css";

import MainHeader from "./components/MainHeader";
import PlayerFrame from "./components/PlayerFrame";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import { library } from "@fortawesome/fontawesome-svg-core";
import { faPlay } from "@fortawesome/free-solid-svg-icons";
library.add(faPlay);

const app = createApp(App);
app.component("main-header", MainHeader);
app.component("player-frame", PlayerFrame);
app.component("font-awesome-icon", FontAwesomeIcon);

app.mount("#app");

My code in App.vue. This is not the icon's final position, I just am testing it here, until I can get it to show up:

<template>
  <main-header></main-header>
  <player-frame></player-frame>
  <font-awesome-icon icon="fa-solid fa-play"></font-awesome-icon>
</template>

<script>
import MainHeader from "./components/MainHeader.vue";
import PlayerFrame from "./components/PlayerFrame.vue";

export default {
  components: {
    MainHeader,
    PlayerFrame,
  },
};
</script>

My package.json:

"dependencies": {
    "@fortawesome/fontawesome-svg-core": "^6.1.1",
    "@fortawesome/free-solid-svg-icons": "^6.1.1",
    "@fortawesome/vue-fontawesome": "^3.0.0-5",
    "core-js": "^3.8.3",
    "font-awesome": "^4.7.0",
    "gsap": "^3.10.3",
    "vue": "^3.2.13",
    "vue-router": "^4.0.3"
  },

Ι have tried the solution suggested in the first comment but it doesn't work. I get this warning in chrome console instead of the original error:

Failed to runtime-core.esm-bundler.js?d2dd:38 [Vue warn]: Failed to resolve >component: fort-awesome-icon If this is a native custom element, make sure to exclude it from component >resolution via compilerOptions.isCustomElement. at App

CodePudding user response：

try this style

<font-awesome-icon :icon="['fas', 'play']" />

no need to prefix the icon name with 'fa'

CodePudding user response：

You can take a look here (font-awesome doc for vue). you shouldn't use a closing tag with font-awesome

so change this:

  <font-awesome-icon icon="fa-solid fa-play"></font-awesome-icon>

to this:

<font-awesome-icon icon="fa-solid fa-play"/>