Integration of an Iconfont (dripicons) in Vue 3 (<3.2)

Icon.vue

<script setup lang="ts">
type Props = {
  icon: `dripicons-${string}`
  size?: string
  alt?: string
}

const props = withDefaults(defineProps<Props>(), {
  size: '1rem'
})
</script>

<template>
  <span class="webfont iconfont-size" :class="icon" :style="{ '--size': size }">
    <span v-if="alt">{{ alt }}</span>
  </span>
</template>

<style lang="scss" scoped>
.webfont {
  display: inline-block;

  span {
    font-size: 0; // SR only
  }
}

.iconfont-size::before {
  font-size: var(--size);
}
</style>