NUXT_FRONTEND/components/Base/Icon.vue

<template lang="html">
    <svg v-if="!loading" class="icon" :class="'icon-'+ name" :width="width" :height="height">
      <use v-bind="{ 'xlink:href': '/svg/symbol/' + src()  + name }" />
    </svg>
    <v-progress-circular
      v-else
      :width="1"
      :size="10"
      indeterminate
    ></v-progress-circular>
</template>

<script>
export default {
  data() {
    return {
      loading: true
    }
  },
  mounted() {
    this.loading = false
  },
  methods: {
    src() {
      if (this.clear) {
        return "sprite-clear.svg#";
      } else {
        return "sprite-styled.svg#";
      }
    },
  },
  props: {
    name: String,
    clear: Boolean,
    iconClass: {
      type: String,
    },
    width: {
      type: [Number, String],
    },
    height: {
      type: [Number, String],
    },
  },
};
</script>

<style lang="less">
</style>