<template>
  <i class="image-icon" :class="`image-icon-${icon}`" :style="iconStyle"></i>
</template>
<script>
export default {
  props: {
    icon: {
      type: String,
      required: true,
    },
    size: {
      type: [String, Number],
      default: '16px',
    },
  },

  computed: {
    iconStyle() {
      if (!this.size) {
        return '';
      }
      return `height:${this.size};width:${this.size};`;
    },
  },
};
</script>
<style lang="scss">
.image-icon {
  display: inline-block;
  height: 16px;
  width: 16px;
  line-height: 0;
  vertical-align: middle;
  background: {
    repeat: no-repeat;
    size: 100% auto;
    size: contain;
    position: center;
  }
}

$icon-list: face, face-disabled, like, share, share-disabled, watch, message, message-bold, phone, mobile-primary, person-primary, logout-primary, play-pv,play-num;
@each $icon in $icon-list {
  .image-icon-#{$icon} {
    background-image: url('~@/assets/icons/#{$icon}.png');
  }
}
</style>

注意：把icons里边的小图片的名称需要放到这个$icon-list里边，如果不放则不会显示图片