<template>
    <svg class="icon" aria-hidden="true" :style="{width:width,height:height}" style="width:100px;height:100px;" v-on="$listeners">
      <use :xlink:href="`#icon-${name}`"></use>
    </svg>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
@Component({
  name: 'CommonSvg',
})
export default class CommonSvg extends Vue {
  @Prop() private name!: string;
  @Prop({
    default: '1em',
  }) private width!: number|string;
  @Prop({
    default: '1em',
  }) private height!: number|string;
}
</script>
<style scoped lang="scss">
   .icon {
       width: 1em; height: 1em;
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
    }
</style>
