Vue 3 - 找不到一个或多个图标

Question

我是 vue 的新手，我正在尝试构建一个简单的音乐播放器应用程序。我想为播放器控件使用一些超棒的字体图标（即 'play' 图标），但是我似乎无法让它工作。我不断收到此错误：

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

我已按照 font-awesome/vue 文档中的说明进行操作，并且已阅读此处的其他相关主题。欢迎任何帮助，谢谢！

我的代码在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");

我的代码在App.vue。这不是图标的最终位置，我只是在这里测试它，直到它显示出来：

<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>

我的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"
  },

我已经尝试了第一条评论中建议的解决方案，但它不起作用。我在 chrome 控制台中收到此警告而不是原始错误：

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

Answer 1

你可以看看here（font-awesome vue 文档）。你不应该使用带有 font-awesome

的结束标签

所以改变这个：

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

对此：

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

Answer 2

试试这个风格

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

无需在图标名称前加上'fa'

前缀

Vue 3 - 找不到一个或多个图标

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

font-awesome

vue.js