JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/vue@next"></script>
<div id="app">
    <Help-Button></Help-Button>
    <Settings-Button></Settings-Button>
</div>

CSS

a {
  display: block;
}

a > div {
  display: inline-block;
  background: black;
  border-radius: 25px;
  height: 1rem;
  width: 1rem;
}

JavaScript

const { ref } = Vue;

// Icons --------------------------------------------------
const HelpIcon = {
    template: `<div :style="{ 'background': hover ? 'blue' : '' }"></div>`,

    props: {
        hover: {
            type: Boolean,
            required: true,
        },
    },
};

const SettingsIcon = {
    template: `<div :style="{ 'background': hover ? 'green' : '' }"></div>`,

    props: {
        hover: {
            type: Boolean,
            required: true,
        },
    },
};

// Base Button ----------------------------------------------
const BaseButton = {
    template: `
        <a href="/" @click.prevent>
            <slot name="icon" />

            <span>
                <slot name="text" />
            </span>
        </a>
    `,
};

// Buttons --------------------------------------------------
const HelpButton = {
    components: { BaseButton, HelpIcon },

    template: `
        <BaseButton @mouseover="hover = true" @mouseleave="hover = false">
            <template #icon>
                <HelpIcon :hover="hover" />
            </template>

            <template #text>Help</template>
        </BaseButton>
    `,

    setup() {
        const hover = ref(false);
        return { hover };
    }
};

const SettingsButton = {
    components: { BaseButton, SettingsIcon },

    template: `
        <BaseButton @mouseover="hover = true" @mouseleave="hover = false">
            <template #icon>
                <SettingsIcon :hover="hover" />
            </template>

            <template #text>Settings</template>
        </BaseButton>
    `,

    setup() {
        const hover = ref(false);
        return { hover };
    }
};

Vue.createApp({
    components: { HelpButton, SettingsButton },
}).mount('#app');