<template>
  <text 
    class="custom-icon" 
    :class="iconClass" 
    :style="{ color: color, fontSize: size + 'px' }"
    @click="$emit('click')"
  ></text>
</template>

<script>
export default {
  name: "my-icon",
  props: {
    // 图标名称，例如 'icon-home'
    name: {
      type: String,
      default: ""
    },
    // 图标颜色
    color: {
      type: String,
      default: "#333333"
    },
    // 图标大小，单位 rpx
    size: {
      type: [Number, String],
      default: 16
    }
  },
  computed: {
    iconClass() {
      // 这里的 'custom-icon' 必须和下面 font-family 的定义或者样式前缀对应
      const name = `icon-${this.name}`;
      return name;
    }
  }
}
</script>

<style scoped>
/* 1. 引入并定义字体名称 */
@font-face {
  font-family: 'myIconFont'; 
  /* 微信小程序若本地引用报错，可换成 base64 字符串或网络绝对路径 */
  src: url('@/static/font/iconfont.ttf') format('truetype');
}

/* 2. 定义基础样式 */
.custom-icon {
  font-family: "myIconFont" !important;
  font-size: inherit;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
}

.icon-sanjiaozhou-maohao:before {
  content: "\e630";
}
.icon-sanjiaozhou-fengexian:before {
  content: "\e631";
}
.icon-sanjiaozhou-douhao:before {
  content: "\e626";
}
.icon-sanjiaozhou-0:before {
  content: "\e629";
}
.icon-sanjiaozhou-1:before {
  content: "\e627";
}
.icon-sanjiaozhou-2:before {
  content: "\e62b";
}
.icon-sanjiaozhou-3:before {
  content: "\e62c";
}
.icon-a-sanjiaozhou-4:before {
  content: "\e62f";
}
.icon-sanjiaozhou-5:before {
  content: "\e62d";
}
.icon-sanjiaozhou-6:before {
  content: "\e628";
}
.icon-sanjiaozhou-7:before {
  content: "\e625";
}
.icon-sanjiaozhou-8:before {
  content: "\e62a";
}
.icon-sanjiaozhou-9:before {
  content: "\e62e";
}
</style>