<script lang='ts' setup>
import type { ComponentInstance } from "vue";

const vm = getCurrentInstance()!;

function changeRef(exposed: any) {
  vm.exposed = exposed;
}

defineExpose({} as ComponentInstance<typeof IonAvatar>);
</script>

<template>
  <ion-avatar v-bind="$attrs" :ref="changeRef">
    <img
      src="https://api.iconify.design/material-icon-theme:drizzle.svg"
      alt="Avatar"
    >
  </ion-avatar>
</template>

<style lang='css' scoped>
ion-avatar {
  --padding: 10px;
  background-color: #e7f6e1;
  padding: var(--padding);
  border: 2px solid #e3ffcb;
}
</style>
