sulibao-mini/tuniao-ui/components/tn-color-icon/tn-color-icon.vue

<template>
  <text
    class="tn-color-icon-class tn-color-icon"
    :class="[
      'tn-color-icon-' + name
    ]"
    :style="{
      fontSize: size + unit,
      margin: margin
    }"
    @tap="handleClick"
  ></text>
</template>

<script>
  export default {
    name: 'tn-color-icon',
    props: {
      // 索引
      index: {
        type: [Number, String],
        default: '0'
      },
      // 图标名称
      name: {
        type: String,
        default: ''
      },
      // 图标大小
      size: {
        type: Number,
        default:32
      },
      // 大小单位
      unit: {
        type: String,
        default: 'px'
      },
      // 外边距
      margin: {
        type: String,
        default: '0'
      }
    },
    computed: {
      
    },
    data() {
      return {
        
      }
    },
    methods: {
      // 处理点击事件
      handleClick() {
        this.$emit("click", {
          index: Number(this.index)
        })
        this.$emit("tap", {
          index: Number(this.index)
        })
      }
    }
  }
</script>

<style scoped>
  @charset "UTF-8";
  
  @font-face {
    font-family: "tuniaoColorFont"; /* Project id 2445412 */
    /* Color fonts */
    src: url('iconfont.woff2?t=1632654518618') format('woff2');
  }
  
  .tn-color-icon {
    font-family: "tuniaoColorFont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    text-decoration: none;
  }
  
  .tn-color-icon-logo-github:before {
    content: "\e601";
  }
  
  .tn-color-icon-logo-qq:before {
    content: "\e602";
  }
  
  .tn-color-icon-logo-weixin:before {
    content: "\e603";
  }
  
  .tn-color-icon-logo-alipay:before {
    content: "\e604";
  }
  
  .tn-color-icon-logo-weibo:before {
    content: "\e605";
  }
  
  .tn-color-icon-logo-dingtalk:before {
    content: "\e606";
  }
  
  .tn-color-icon-safe:before {
    content: "\e607";
  }
  
  .tn-color-icon-wifi:before {
    content: "\e608";
  }
  
  .tn-color-icon-help:before {
    content: "\e609";
  }
  
  .tn-color-icon-tag:before {
    content: "\e60a";
  }
  
  .tn-color-icon-play:before {
    content: "\e60b";
  }
  
  .tn-color-icon-stopwatch:before {
    content: "\e60c";
  }
  
  .tn-color-icon-home:before {
    content: "\e60d";
  }
  
  .tn-color-icon-map:before {
    content: "\e60e";
  }
  
  .tn-color-icon-book:before {
    content: "\e60f";
  }
  
  .tn-color-icon-qrcode:before {
    content: "\e610";
  }
  
  .tn-color-icon-discover:before {
    content: "\e611";
  }
  
  .tn-color-icon-visitor:before {
    content: "\e612";
  }
  
  .tn-color-icon-menu:before {
    content: "\e613";
  }
  
  .tn-color-icon-renew:before {
    content: "\e614";
  }
  
  .tn-color-icon-business:before {
    content: "\e615";
  }
  
  .tn-color-icon-telephone:before {
    content: "\e616";
  }
  
  .tn-color-icon-medicine:before {
    content: "\e617";
  }
  
  .tn-color-icon-chicken:before {
    content: "\e618";
  }
  
  .tn-color-icon-clock:before {
    content: "\e619";
  }
  
  .tn-color-icon-download:before {
    content: "\e61a";
  }
  
  .tn-color-icon-lamp:before {
    content: "\e61b";
  }
  
  .tn-color-icon-hourglass:before {
    content: "\e61c";
  }
  
  .tn-color-icon-calendar:before {
    content: "\e61d";
  }
  
  .tn-color-icon-bluetooth:before {
    content: "\e61e";
  }
  
  .tn-color-icon-fish:before {
    content: "\e61f";
  }
  
  .tn-color-icon-seal:before {
    content: "\e620";
  }
  
  .tn-color-icon-remind:before {
    content: "\e621";
  }
  
  .tn-color-icon-music:before {
    content: "\e622";
  }
  
  .tn-color-icon-email:before {
    content: "\e623";
  }
  
  .tn-color-icon-medal:before {
    content: "\e624";
  }
  
  .tn-color-icon-image:before {
    content: "\e625";
  }
  
  .tn-color-icon-network:before {
    content: "\e626";
  }
  
  .tn-color-icon-wallet:before {
    content: "\e627";
  }
  
  .tn-color-icon-program:before {
    content: "\e628";
  }
  
  .tn-color-icon-shrimp:before {
    content: "\e629";
  }
  
  .tn-color-icon-collect:before {
    content: "\e62a";
  }
  
  .tn-color-icon-screw:before {
    content: "\e62b";
  }
  
  .tn-color-icon-set:before {
    content: "\e62c";
  }
  
  .tn-color-icon-userfavorite:before {
    content: "\e62d";
  }
  
  .tn-color-icon-useradd:before {
    content: "\e62e";
  }
  
  .tn-color-icon-honor:before {
    content: "\e62f";
  }
  
  .tn-color-icon-shop:before {
    content: "\e630";
  }
  
  .tn-color-icon-usercard:before {
    content: "\e631";
  }
  
  .tn-color-icon-school:before {
    content: "\e632";
  }
  
  .tn-color-icon-user:before {
    content: "\e633";
  }
  
  .tn-color-icon-internet:before {
    content: "\e634";
  }
  
  .tn-color-icon-time:before {
    content: "\e635";
  }
  
  .tn-color-icon-topic:before {
    content: "\e636";
  }
  
  .tn-color-icon-phone:before {
    content: "\e637";
  }
  
  .tn-color-icon-usertable:before {
    content: "\e638";
  }
  
  .tn-color-icon-userset:before {
    content: "\e639";
  }
  
  .tn-color-icon-game:before {
    content: "\e63a";
  }
  
</style>