[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 hint @antfu ? :)