beka
5/10/2019 - 8:38 PM

封装iconfont图标

class的引用方式

<template>
  <i :class="cls" :style="style"></i>
</template>

<script>
export default {
  name: 'iconfont',
  props: {
    icon: {
      type: String,
      default: ''
    },
    size: {
      type: [Number, String],
      default: 12
    },
    color: {
      type: String,
      default: '#222'
    }
  },
  data() {
    return {
      cls: [
        'iconfont',
        `icon-${this.icon}`
      ]
    };
  },
  computed: {
    style() {
      return `font-size: ${this.size}px; color: ${this.color}`;
    }
  },
}

</script>
<style lang='scss' scoped>
// 这是iconfont.css文件,实际项目中导入到main.js
// @import '../../assets/font/src/iconfont.css';
</style>