chore: initial import

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

@@ -0,0 +1,318 @@
+<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>