<template>
  <svg class="mt_bank "  :style ="style" aria-hidden="true">
      <use :xlink:href="'#bank-' + icon"></use>
  </svg>
</template>
<script>
  import bank from './bank.json'
  import './icon'
  
  export default {
    data () {
      return {
        bank: bank
      }
    },
    props: {
      icon: String,
      color: {
        default: '#666',
        type: String
      },
      size: {
        default: 's',
        type: String
      }
    },
    computed: {
      style () {
        function size (str) {
          switch (str) {
            case 's': return '18px'
            case 'm': return '36px'
            case 'l': return '64px'
            default: return str + 'px'
          }
        }
        return {
          width: size(this.size),
          height: size(this.size)
        }
      }
    }
  }
</script>
