1

I use the heroicons (https://heroicons.com/) in my navigation.

How do i switch between BookmarkIcon, if i want to use the solid and outline version in the same component?

For the standard layout, i want to use the outline version of heroicons.

import { BookmarkIcon } from "@heroicons/vue/24/outline"

When i the navigation item is active, i want to use the solid version of heroicons.

import { BookmarkIcon } from "@heroicons/vue/24/solid"

How i can use both, when both has to implemented with the same name?

1 Answers1

2

Import one icon with an alias

import { BookmarkIcon as BookmarkIconActive } from '@heroicons/vue/24/solid';

Show hide with css display: none/inline

or with JS as reactive variable in Vue ref(false) + v-model / @click

Example

<script setup lang="ts">
import { BookmarkIcon } from '@heroicons/vue/24/outline';
import { BookmarkIcon as BookmarkIconActive } from '@heroicons/vue/24/solid';
                                
import { ref } from 'vue';
const active = ref(false);
</script>

<template>
  CSS on hover
  <div class="hover-me">
    <BookmarkIcon class="icon passive" />
    <BookmarkIconActive class="icon active hidden" />
  </div>
  <label>
  JS on checked 
  <input type="checkbox" v-model="active" />
  <br />
  or clicked 
  </label>
  <br />
    <BookmarkIcon @click="active = !active" class="icon" v-show="!active" />
    <BookmarkIconActive @click="active = !active" class="icon" v-show="active" />
</template>

<style>
.icon {
  width: 100px;
  height: 100px;
  color: gray;
}
.icon.hidden,
.hover-me:hover .icon.passive {
  display: none;
}
.hover-me:hover .icon.active {
  display: inline;
}
</style>

See this Stackblitz

tauzN
  • 5,162
  • 2
  • 16
  • 21