Vue3+Vite项目中FontAwesomeIcon必填prop缺失警告的解决方法

问题原因 #

你的代码里每个<router-link>下都包含了两个<font-awesome-icon>组件，其中第二个是空标签：

<font-awesome-icon />

FontAwesomeIcon组件要求必须传入icon这个必填prop，这个空标签没有提供任何icon值，所以触发了Missing required prop: "icon"的警告。

解决方法 #

直接删除这个多余的空<font-awesome-icon />标签即可。修改后的核心代码如下：

<router-link
  v-for="page in pagesList"
  :key="page.title"
  :to="{ name: page.to }"
  class="box flex flex-col items-center justify-center h-[70px]"
>
  <font-awesome-icon
    :icon="[page.itype, page.iname]"
    class="text-headcolor text-xl mb-2"
  />
  <span class="text-headcolor text-sm uppercase">{{ page.title }}</span>
</router-link>

动态渲染验证 #

你原本的动态图标逻辑是正确的：:icon="[page.itype, page.iname]"会根据pagesList里的itype（图标样式组，比如far/fas）和iname（图标名称）动态渲染对应图标，删除多余标签后，这个逻辑依然正常工作，同时警告会消失。

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