How to set Heroicon icon on top of button background image with Vue 3 and TailwindCSS-CodePudding

I am attempting to set a Heroicon icon on top of an button background image in Vue 3 and TailwindCSS. I created a circular button component containing a button with a background image and a slot for Heroicon icons:

<!--ButtonComponent-->

  <div>
    <button type="button" >
        <img :src="https://image.shutterstock.com/image-illustration/abstract-vector-blue-color-geometric-260nw-167535434.jpg">
        <slot ></slot>
    </button>
  </div>

I then imported that button component into another component, then wrapped that button around an imported Heroicon icon:

<!--ParentComponent-->

<div>
  <ButtonComponent>
     <VideoCameraIcon />
  </ButtonComponent>
</div>

import { VideoCameraIcon } from '@heroicons/vue/outline'

My goal is to configure the slot handling the Heroicon icon to sit on top of the button background image. To handle this, I added a TailwindCSS relative property to the button, and an absolute property to the slot. However, this still doesn't work. How can I go about enabling the slot element to sit on top of image (in order to display the Heroicon icon on the image)?

CodePudding user response：

slot tag doesn't take class attribute in consideration, you should use the :slotted pseudo-class inside a scoped style:

<div>
  <ButtonComponent>
     <VideoCameraIcon  />
  </ButtonComponent>
</div>
<script >
import { VideoCameraIcon } from '@heroicons/vue/outline'
....
</script>
<style scoped>
:slotted(.btn-icon) {
  @apply absolute
}
</style>