app_tree_planting/components/uni-icon/uni-icon.vue

<template>
  <view
    :class="'uni-icon-' + type"
    :style="{ color: color, 'font-size': size + 'px' }"
    class="uni-icon"
    @click="_onClick"
  />
</template>

<script>
export default {
  name: 'UniIcon',
  props: {
    type: {
      type: String,
      default: ''
    },
    color: {
      type: String,
      default: '#333333'
    },
    size: {
      type: [Number, String],
      default: 16
    }
  },
  methods: {
    _onClick () {
      this.$emit('click')
    }
  }
}
</script>

<style>
@font-face {
	font-family: uniicons;
	font-weight: normal;
	font-style: normal;
	src: url(data:application/x-font-woff2;charset=utf-8;base64,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
		format('truetype');
}

.uni-icon-wrapper {
	line-height: 1;
}

.uni-icon {
	font-family: uniicons;
	font-weight: normal;
	font-style: normal;
	line-height: 1;
	display: flex;
	/* justify-content: center; */
	align-items: center;
	text-decoration: none;
	-webkit-font-smoothing: antialiased;
}

.uni-icon.uni-active {
	color: #007aff;
}

.uni-icon-qq:before {
  content: "\e601";
}

.uni-icon-weibo:before {
  content: "\e67a";
}

.uni-icon-loop:before {
  content: "\ec31";
}

.uni-icon-paperclip:before {
  content: "\e618";
}

.uni-icon-bluetoothaudio:before {
  content: "\e61e";
}

.uni-icon-bluetoothconnected:before {
  content: "\e61f";
}

.uni-icon-bluetoothdisabled:before {
  content: "\e620";
}

.uni-icon-bluetoothsearching:before {
  content: "\e621";
}

.uni-icon-bluetooth:before {
  content: "\e622";
}

.uni-icon-bookmarkoutline:before {
  content: "\e624";
}

.uni-icon-bookmark:before {
  content: "\e625";
}

.uni-icon-checkboxout-filled:before {
  content: "\e63a";
}

.uni-icon-checkboxout:before {
  content: "\e63b";
}

.uni-icon-checkbox-filled:before {
  content: "\e63e";
}

.uni-icon-circle:before {
  content: "\e63f";
}

.uni-icon-checkcircle:before {
  content: "\e641";
}

.uni-icon-checkmarkempty:before {
  content: "\e642";
}

.uni-icon-closeempty:before {
  content: "\e64a";
}

.uni-icon-download:before {
  content: "\e64e";
}

.uni-icon-upload:before {
  content: "\e651";
}

.uni-icon-directionsbike:before {
  content: "\e663";
}

.uni-icon-directionsbus:before {
  content: "\e664";
}

.uni-icon-directionscar:before {
  content: "\e665";
}

.uni-icon-directionssubway:before {
  content: "\e666";
}

.uni-icon-directionstrain:before {
  content: "\e667";
}

.uni-icon-directionstransit:before {
  content: "\e668";
}

.uni-icon-directionswalk:before {
  content: "\e66a";
}

.uni-icon-driveeta:before {
  content: "\e674";
}

.uni-icon-fastforward:before {
  content: "\e68d";
}

.uni-icon-fastrewind:before {
  content: "\e68e";
}

.uni-icon-filedownload:before {
  content: "\e690";
}

.uni-icon-fileupload:before {
  content: "\e691";
}

.uni-icon-filter:before {
  content: "\e692";
}

.uni-icon-flights:before {
  content: "\e697";
}

.uni-icon-capslock:before {
  content: "\e6d9";
}

.uni-icon-menu:before {
  content: "\e6f6";
}

.uni-icon-micnone:before {
  content: "\e6fc";
}

.uni-icon-micoff:before {
  content: "\e6fd";
}

.uni-icon-mics-filled:before {
  content: "\e6fe";
}

.uni-icon-notificationsnone:before {
  content: "\e70f";
}

.uni-icon-notificationsoff:before {
  content: "\e71f";
}

.uni-icon-notificationson:before {
  content: "\e721";
}

.uni-icon-notifications:before {
  content: "\e723";
}

.uni-icon-pausecirclefill:before {
  content: "\e711";
}

.uni-icon-pausecircleoutline:before {
  content: "\e717";
}

.uni-icon-pause:before {
  content: "\e718";
}

.uni-icon-playarrow:before {
  content: "\e724";
}

.uni-icon-playcirclefill:before {
  content: "\e725";
}

.uni-icon-playcircleoutline:before {
  content: "\e726";
}

.uni-icon-circle-filled:before {
  content: "\e73f";
}

.uni-icon-traffic:before {
  content: "\e792";
}

.uni-icon-visibilityoff:before {
  content: "\e7ab";
}

.uni-icon-visibility:before {
  content: "\e7ac";
}

.uni-icon-volumedown:before {
  content: "\e7af";
}

.uni-icon-volumemute:before {
  content: "\e7b0";
}

.uni-icon-volumeoff:before {
  content: "\e7b1";
}

.uni-icon-volumeup:before {
  content: "\e7b2";
}

.uni-icon-arrowthinleft:before {
  content: "\e62d";
}

.uni-icon-weixin:before {
  content: "\e62e";
}

.uni-icon-pengyouquan:before {
  content: "\e68c";
}

.uni-icon-new:before {
  content: "\e673";
}

.uni-icon-spinner:before {
  content: "\e600";
}

.uni-icon-diamond:before {
  content: "\e608";
}

.uni-icon-undo:before {
  content: "\e907";
}

.uni-icon-redo:before {
  content: "\e771";
}

.uni-icon-spinner-cycle:before {
  content: "\e71d";
}

.uni-icon-settings:before {
  content: "\e676";
}

.uni-icon-bars:before {
  content: "\ef34";
}

.uni-icon-paperplane:before {
  content: "\e652";
}

.uni-icon-plus-filled:before {
  content: "\e6e0";
}

.uni-icon-plus:before {
  content: "\e6e1";
}

.uni-icon-personadd-filled:before {
  content: "\e6e2";
}

.uni-icon-personadd:before {
  content: "\e6e3";
}

.uni-icon-contact-filled:before {
  content: "\e6e4";
}

.uni-icon-contact:before {
  content: "\e6e5";
}

.uni-icon-eye-filled:before {
  content: "\e6e6";
}

.uni-icon-eye:before {
  content: "\e6e7";
}

.uni-icon-camera-filled:before {
  content: "\e6e8";
}

.uni-icon-camera:before {
  content: "\e6e9";
}

.uni-icon-star-filled:before {
  content: "\e6ea";
}

.uni-icon-star:before {
  content: "\e6eb";
}

.uni-icon-location-filled:before {
  content: "\e6ec";
}

.uni-icon-location:before {
  content: "\e6ed";
}

.uni-icon-customerservice-filled:before {
  content: "\e6f0";
}

.uni-icon-customerservice:before {
  content: "\e6f1";
}

.uni-icon-clear-filled:before {
  content: "\e6f2";
}

.uni-icon-clear:before {
  content: "\e6f3";
}

.uni-icon-compose:before {
  content: "\e6f5";
}

.uni-icon-empty:before {
  content: "\e6f7";
}

.uni-icon-empty-filled:before {
  content: "\e6f8";
}

.uni-icon-arrowright:before {
  content: "\e6f9";
}

.uni-icon-help-filled:before {
  content: "\e6fa";
}

.uni-icon-help:before {
  content: "\e6fb";
}

.uni-icon-group:before {
  content: "\e6ff";
}

.uni-icon-group-filled:before {
  content: "\e700";
}

.uni-icon-home-filled:before {
  content: "\e702";
}

.uni-icon-home:before {
  content: "\e703";
}

.uni-icon-chatboxes-filled:before {
  content: "\e704";
}

.uni-icon-chatboxes:before {
  content: "\e705";
}

.uni-icon-like-filled:before {
  content: "\e707";
}

.uni-icon-like:before {
  content: "\e708";
}

.uni-icon-lock-filled:before {
  content: "\e709";
}

.uni-icon-lock:before {
  content: "\e70a";
}

.uni-icon-email:before {
  content: "\e70b";
}

.uni-icon-email-filled:before {
  content: "\e70c";
}

.uni-icon-chat:before {
  content: "\e70d";
}

.uni-icon-chat-filled:before {
  content: "\e70e";
}

.uni-icon-mobile-filled:before {
  content: "\e72b";
}

.uni-icon-mobile:before {
  content: "\e72c";
}

.uni-icon-more:before {
  content: "\e710";
}

.uni-icon-minus-filled:before {
  content: "\e712";
}

.uni-icon-minus:before {
  content: "\e713";
}

.uni-icon-list:before {
  content: "\e714";
}

.uni-icon-person-filled:before {
  content: "\e715";
}

.uni-icon-person:before {
  content: "\e716";
}

.uni-icon-image-filled:before {
  content: "\e719";
}

.uni-icon-image:before {
  content: "\e71a";
}

.uni-icon-praise-filled:before {
  content: "\e727";
}

.uni-icon-praise:before {
  content: "\e72a";
}

.uni-icon-info-filled:before {
  content: "\e71b";
}

.uni-icon-info:before {
  content: "\e71c";
}

.uni-icon-reload:before {
  content: "\e71e";
}

.uni-icon-arrowleft:before {
  content: "\e720";
}

.uni-icon-scan:before {
  content: "\e722";
}

.uni-icon-gear-filled:before {
  content: "\e728";
}

.uni-icon-gear:before {
  content: "\e729";
}

.uni-icon-switch:before {
  content: "\e72e";
}

.uni-icon-sound-filled:before {
  content: "\e72f";
}

.uni-icon-sound:before {
  content: "\e730";
}

.uni-icon-mic-filled:before {
  content: "\e737";
}

.uni-icon-mic:before {
  content: "\e738";
}

.uni-icon-trash:before {
  content: "\e739";
}

.uni-icon-trash-filled:before {
  content: "\e73a";
}

.uni-icon-unlock-filled:before {
  content: "\e73b";
}

.uni-icon-unlock:before {
  content: "\e73c";
}

.uni-icon-videocam:before {
  content: "\e73d";
}

.uni-icon-videocam-filled:before {
  content: "\e73e";
}

.uni-icon-search:before {
  content: "\e741";
}

.uni-icon-search-filled:before {
  content: "\e742";
}

.uni-icon-publishgoods-filled:before {
  content: "\e746";
}

.uni-icon-arrowup:before {
  content: "\e749";
}

.uni-icon-commodity:before {
  content: "\e764";
}

.uni-icon-map:before {
  content: "\e643";
}

.uni-icon-certificate-filled:before {
  content: "\eb92";
}

.uni-icon-arrowdown:before {
  content: "\e74b";
}

.uni-icon-arrowthindown:before {
  content: "\e74c";
}

.uni-icon-arrowthinup:before {
  content: "\e74d";
}

.uni-icon-arrowthinright:before {
  content: "\e74e";
}

</style>