[Question] Recommended way to change icon based on CSS states

[itpropro]

With UnoCSS, I could do this if I want to change the icon on hover

<button class="i-carbon-close-outline hover:i-carbon-close-filled">
  <span class="sr-only">Close</span>
</button>

What is the recommended way to do this with native CSS and NuxtIcon? These variants are all a bit much and don't really work well

This avoids group, as there can already be a group class somewhere up the hierarchy.

<button>
  <div class="relative size-4">
    <UIcon name="i-carbon-close-outline" class="absolute top-0 left-0 size-4 peer hover:hidden block" />
    <UIcon name="i-carbon-close-filled" class="absolute top-0 left-0 size-4 peer-hover:block hidden" />
  </div>
</button>

I would also like to avoid JS (same with :name)

const icon = ref<HTMLElement | null>(null)
const isHovered = useElementHover(icon)
...
<button>
  <div ref="icon" class="size-4">
    <UIcon v-show="isHovered" name="i-carbon-close-outline" class="size-4" />
    <UIcon v-show="!isHovered" name="i-carbon-close-filled" class="size-4" />
  </div>
</button>

[itpropro]

Any idea @antfu ?

[antfu]

Unfortunately, I think with Nuxt Icon's approach (think them more like an image DOM), it's not really feasible to do what UnoCSS is able to do - in that case I would recommend you to use Uno, or you have to use a bit JavaScript or hover:hidden to change the icon.

[itpropro]

Unfortunately, I think with Nuxt Icon's approach (think them more like an image DOM), it's not really feasible to do what UnoCSS is able to do - in that case I would recommend you to use Uno, or you have to use a bit JavaScript or hover:hidden to change the icon.

Thanks for the reply! I am unfortunately locked into NuxtIcon by Nuxt UI. Would be great if Nuxt UI would have support for UnoCSS, but it's all Tailwind. I will then have to use JS for that.