如何在Vue组件中切换Heroicons的轮廓与实心版本？

解决这个问题的核心是重命名导入的组件，避免同名冲突，再根据激活状态动态渲染对应版本的图标。

步骤1：重命名导入两个图标组件 #

因为两个BookmarkIcon来自不同的路径，导入时使用as关键字给它们起不同的别名：

import { BookmarkIcon as BookmarkOutlineIcon } from "@heroicons/vue/24/outline"
import { BookmarkIcon as BookmarkSolidIcon } from "@heroicons/vue/24/solid"

步骤2：根据激活状态切换渲染 #

假设你用isActive变量控制导航项的激活状态，下面提供两种常用的实现方式：

方式一：使用v-if/v-else条件渲染

<template>
  <nav>
    <div 
      :class="{ active: isActive }" 
      @click="isActive = !isActive"
    >
      <!-- 未激活时显示轮廓版 -->
      <BookmarkOutlineIcon v-if="!isActive" class="w-6 h-6" />
      <!-- 激活时显示实心版 -->
      <BookmarkSolidIcon v-else class="w-6 h-6" />
      <span>收藏</span>
    </div>
  </nav>
</template>

<script setup>
import { ref } from 'vue'
import { BookmarkIcon as BookmarkOutlineIcon } from "@heroicons/vue/24/outline"
import { BookmarkIcon as BookmarkSolidIcon } from "@heroicons/vue/24/solid"

// 控制激活状态的变量
const isActive = ref(false)
</script>

<style scoped>
.active {
  color: #3b82f6; /* 示例：激活态的文本/图标颜色 */
}
</style>

方式二：使用动态组件<component>

如果需要切换的状态较多，这种方式代码更简洁：

<template>
  <nav>
    <div 
      :class="{ active: isActive }" 
      @click="isActive = !isActive"
    >
      <!-- 根据isActive动态绑定组件 -->
      <component 
        :is="isActive ? BookmarkSolidIcon : BookmarkOutlineIcon" 
        class="w-6 h-6" 
      />
      <span>收藏</span>
    </div>
  </nav>
</template>

<script setup>
import { ref } from 'vue'
import { BookmarkIcon as BookmarkOutlineIcon } from "@heroicons/vue/24/outline"
import { BookmarkIcon as BookmarkSolidIcon } from "@heroicons/vue/24/solid"

const isActive = ref(false)
</script>

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