如何将Vue项目中Font Awesome图标设置为JavaScript prop

API 探路者

2026-10-4

实现方案

你只需要给子组件新增一个图标prop，把原有的硬编码图标配置替换为prop绑定即可，修改步骤如下：

步骤1：修改子组件props定义

在side-nav-flexible-link的script代码中新增icon属性声明，数组类型的prop默认值需要用函数返回，保持默认值和你原来的plug图标一致：

<script>
export default ({
  props: {
    linkName: {
      type: String,
      default: 'Unnamed'
    },
    // 新增图标配置prop
    icon: {
      type: Array,
      default: () => ['fas', 'plug']
    }
  },
  data () {
    return {
      isOpen: false
    }
  },
  methods: {
    clickArrow () {
      // 这里可以简化写法，不需要if判断
      this.isOpen = !this.isOpen
    }
  }
})
</script>

步骤2：替换模板中的硬编码图标

把template里导航项对应的图标配置，从硬编码的['fas', 'plug']替换为绑定到你新增的iconprop，下拉箭头的图标保持固定不需要修改：

<template>
<li>
  <div class="icon_link" @click="clickArrow">
    <a href="#">
      <!-- 这里替换为prop绑定 -->
      <font-awesome-icon class="icon" :icon="icon" />
      <span class="link_name">{{ linkName }}</span>
    </a>
    <font-awesome-icon
      class="icon"
      :icon="['fas', 'chevron-down']"
    />
  </div>
  <ul v-show="isOpen" class="sub-menu">
    <slot />
  </ul>
</li>
</template>

步骤3：调用组件时传入自定义图标

在父组件调用导航项的时候，传入对应图标配置即可实现不同导航项显示不同图标：

<!-- 示例：游戏菜单传入gamepad图标 -->
<side-nav-flexible-link linkName="Games" :icon="['fas', 'gamepad']">
    <li><a href="#">New Leaf</a></li>
    <li><a href="#">Pocket Camp</a></li>
    <li><a href="#">New Horizons</a></li>
</side-nav-flexible-link>

<!-- 示例：首页菜单传入home图标 -->
<side-nav-flexible-link linkName="首页" :icon="['fas', 'home']">
  <!-- 对应下拉内容 -->
</side-nav-flexible-link>