feat(VMorphingIcon): create new component

[J-Sek]

Introduces new component because morphing requires multiple blending layers (see draft)

• add example with button variants (flat, tonal, outline)
• potential alternative (v-swap-icon ? ark)

Warning

Verified on mobile: visible border (from the blur) and transition has stutters

Warning

Contrast filter makes icons look off (it depends on the screen). We would need some disclaimer about this technique being only useful if the target environment is mobile or Macs.

Markup:

<template>
  <v-app theme="dark">
    <v-theme-provider v-for="i in 6" :key="i" :theme="i < 4 ? 'light' : 'dark'">
      <v-container class="d-flex justify-center ga-3">
        <v-sheet
          class="pa-6 rounded-xl d-flex align-center ga-3"
          color="background"
          border="thin"
        >
          <v-defaults-provider
            :defaults="{ VBtn: { size: 'x-large', icon: true, ripple: false, color: i % 3 === 1 ? undefined : 'red', variant: i % 3 ? 'flat' : 'tonal' } }"
          >
            <v-btn
              @click="s1 = (s1 + 1) % 3"
              :icon="['mdi-menu', 'mdi-plus', 'mdi-account-cog'][s1]"
            />
            <v-btn @click="s2 = (s2 + 1) % 3">
              <div class="stack">
                <transition name="fade-transition">
                  <v-icon
                    :key="s2"
                    :icon="['mdi-menu', 'mdi-plus', 'mdi-account-cog'][s2]"
                  />
                </transition>
              </div>
            </v-btn>
            <v-btn @click="s3 = (s3 + 1) % 3">
              <v-morphing-icon
                :icon="['mdi-menu', 'mdi-plus', 'mdi-account-cog'][s3]"
                :dark="[2, 4, 5, 6].includes(i)"
              />
            </v-btn>
          </v-defaults-provider>
        </v-sheet>
      </v-container>
    </v-theme-provider>
  </v-app>
</template>

<script setup>
  import { shallowRef } from 'vue'
  const s1 = shallowRef(1)
  const s2 = shallowRef(1)
  const s3 = shallowRef(1)
</script>

<style>
  .stack {
    display: grid;
    place-items: center;

    > * {
      grid-area: 1/1;
    }
  }
</style>