<template>
    <svg :class="svgClass" aria-hidden="true" style="color:currentColor;">
      <use :xlink:href="iconName"></use>
    </svg>
  </template>
  
  <script lang="ts">
  import { defineComponent } from 'vue'
  export default defineComponent({
    name: "SvgIcon",
    props: {
      prefix: { type: String, default: "icon" },
      iconClass: {
        type: String,
        required: true,
      },
      className: {
        type: String,
      },
    },
    computed: {
      iconName() {
        return `#${this.prefix}-${this.iconClass}`;
      },
      svgClass() {
        if (this.className) {
          return "cyber-svg-icon " + this.className;
        } else {
          return "cyber-svg-icon";
        }
      },
    },
  }) ;
  </script>
  