<template>
  <i :class ="'g_icons icon-' + icon" :style ="style"></i>
</template>
<script>
  export default {
    data () {
      return {
      }
    },
    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 {
          fontSize: size(this.size),
          color: this.color
        }
      }
    }
  }
</script>
<style lang ="less">
  @import url(//at.alicdn.com/t/font_205707_02v82ifvi06enrk9.css);
  .g_icons{
    vertical-align: middle;
    color: #666;
    line-height: 1;
  }
</style>
