slibra-official-web/components/BaseIcon.vue

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

const props = defineProps<{
  name: string
  width: number | string
  height: number | string
  color?: string
}>()

const domStyle = computed(() => ({
  width: props.width + 'px',
  height: props.height + 'px',
}))
</script>

<template>
  <section class="icon-container" :style="{...domStyle, color: color}">
    <nuxt-icon :name="name" :filled="!color" style="width: 100%; height: 100%;"/>
  </section>
</template>

<style scoped lang="scss">
.icon-container {
  .nuxt-icon {
    display: inline-block;
    width: 100%;
    height: 100%;

    :deep(svg) {
      width: 100%;
      height: 100%;
      margin-bottom: 0;
    }
  }

}
</style>