Swap

<dv-swap on="ON" off="OFF" />
vue

export default {
  setup: () => {
    return () => (
      <dv-swap
        on={() => <IconVolumeHigh size="48px" />}
        off={() => <IconVolumeMute size="48px" />}
      />
    );
  },
};
tsx

<dv-swap animation="rotate">
  <template v-slot:on>
    <IconSunny size="48px" />
  </template>
  <template v-slot:off>
    <IconMoon size="48px" />
  </template>
</dv-swap>
vue

export default {
  setup: () => {
    return () => (
      <div class="text-center text-9xl">
        <dv-swap on="😈" off="😇" animation="flip" />
      </div>
    );
  },
};
tsx

import { ref } from 'vue';

export default {
  setup: () => {
    const active = ref(false);
    return () => (
      <div class="text-center">
        <div class="py-2">
          <dv-button onClick={() => (active.value = true)}>on</dv-button>
          &nbsp;/&nbsp;
          <dv-button onClick={() => (active.value = false)}>off</dv-button>
        </div>
        <div class="text-9xl">
          <dv-swap on="🥳" off="😭" animation="flip" active={active.value} />
        </div>
      </div>
    );
  },
};
tsx