<template>
	<text class="tui-icon-class tui-icon" :class="'tui-icon-' + name" :style="{ color: color || '#999', fontSize: size + unit, fontWeight: bold ? 'bold' : 'normal',margin:margin }"
	 @tap="handleClick"></text>

</template>

<script>
	export default {
		name: 'tuiIcon',
		props: {
			name: {
				type: String,
				default: ''
			},
			size: {
				type: Number,
				default: 32
			},
			//px或者rpx
			unit:{
				type: String,
				default: 'px'
			},
			color: {
				type: String,
				default: '#999'
			},
			bold: {
				type: Boolean,
				default: false
			},
			margin: {
				type: String,
				default: "0"
			},
			index: {
				type: Number,
				default: 0
			}
		},
		methods: {
			handleClick() {
				this.$emit('click', {
					index: this.index
				});
			}
		}
	};
</script>

<style scoped>
	@charset "UTF-8";

	@font-face {
		font-family: 'thoruiFont';
		src: url(data:application/font-woff;charset=utf-8;base64,[encoded data, 34712 characters]) format('woff');
		font-weight: normal;
		font-style: normal;
	}

	.tui-icon {
		font-family: 'thoruiFont' !important;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		text-align: center;
		text-decoration: none;
	}

	.tui-icon-about:before {
		content: '\e772';
	}

	.tui-icon-about-fill:before {
		content: '\e771';
	}

	.tui-icon-add:before {
		content: '\e770';
	}

	.tui-icon-add-fill:before {
		content: '\e76f';
	}

	.tui-icon-addmessage:before {
		content: '\e76e';
	}

	.tui-icon-addressbook:before {
		content: '\e76d';
	}

	.tui-icon-agree:before {
		content: '\e76c';
	}

	.tui-icon-agree-fill:before {
		content: '\e76b';
	}

	.tui-icon-alarm:before {
		content: '\e76a';
	}

	.tui-icon-alarm-fill:before {
		content: '\e769';
	}

	.tui-icon-alipay:before {
		content: '\e768';
	}

	.tui-icon-android:before {
		content: '\e767';
	}

	.tui-icon-applets:before {
		content: '\e766';
	}

	.tui-icon-arrowdown:before {
		content: '\e765';
	}

	.tui-icon-arrowleft:before {
		content: '\e764';
	}

	.tui-icon-arrowright:before {
		content: '\e763';
	}

	.tui-icon-arrowup:before {
		content: '\e762';
	}

	.tui-icon-attestation:before {
		content: '\e761';
	}

	.tui-icon-back:before {
		content: '\e760';
	}

	.tui-icon-bag:before {
		content: '\e75f';
	}

	.tui-icon-bag-fill:before {
		content: '\e75e';
	}

	.tui-icon-balloon:before {
		content: '\e75d';
	}

	.tui-icon-bankcard:before {
		content: '\e75c';
	}

	.tui-icon-bankcard-fill:before {
		content: '\e75b';
	}

	.tui-icon-bottom:before {
		content: '\e75a';
	}

	.tui-icon-calendar:before {
		content: '\e759';
	}

	.tui-icon-camera:before {
		content: '\e758';
	}

	.tui-icon-camera-fill:before {
		content: '\e757';
	}

	.tui-icon-camera-add:before {
		content: '\e756';
	}

	.tui-icon-card:before {
		content: '\e755';
	}

	.tui-icon-card-fill:before {
		content: '\e754';
	}

	.tui-icon-cart:before {
		content: '\e753';
	}

	.tui-icon-cart-fill:before {
		content: '\e752';
	}

	.tui-icon-category:before {
		content: '\e751';
	}

	.tui-icon-category-fill:before {
		content: '\e750';
	}

	.tui-icon-check:before {
		content: '\e74f';
	}

	.tui-icon-circle:before {
		content: '\e74e';
	}

	.tui-icon-circle-fill:before {
		content: '\e74d';
	}

	.tui-icon-circle-selected:before {
		content: '\e74c';
	}

	.tui-icon-clock:before {
		content: '\e74b';
	}

	.tui-icon-clock-fill:before {
		content: '\e74a';
	}

	.tui-icon-close:before {
		content: '\e749';
	}

	.tui-icon-close-fill:before {
		content: '\e748';
	}

	.tui-icon-community:before {
		content: '\e747';
	}

	.tui-icon-community-fill:before {
		content: '\e746';
	}

	.tui-icon-computer:before {
		content: '\e745';
	}

	.tui-icon-computer-fill:before {
		content: '\e744';
	}

	.tui-icon-coupon:before {
		content: '\e743';
	}

	.tui-icon-delete:before {
		content: '\e742';
	}

	.tui-icon-deletekey:before {
		content: '\e741';
	}

	.tui-icon-dingtalk:before {
		content: '\e740';
	}

	.tui-icon-dissatisfied:before {
		content: '\e73f';
	}

	.tui-icon-down:before {
		content: '\e73e';
	}

	.tui-icon-download:before {
		content: '\e73d';
	}

	.tui-icon-edit:before {
		content: '\e73c';
	}

	.tui-icon-ellipsis:before {
		content: '\e73b';
	}

	.tui-icon-enlarge:before {
		content: '\e73a';
	}

	.tui-icon-evaluate:before {
		content: '\e739';
	}

	.tui-icon-exchange:before {
		content: '\e738';
	}

	.tui-icon-explain:before {
		content: '\e737';
	}

	.tui-icon-explain-fill:before {
		content: '\e736';
	}

	.tui-icon-explore:before {
		content: '\e735';
	}

	.tui-icon-explore-fill:before {
		content: '\e734';
	}

	.tui-icon-eye:before {
		content: '\e733';
	}

	.tui-icon-feedback:before {
		content: '\e732';
	}

	.tui-icon-fingerprint:before {
		content: '\e730';
	}

	.tui-icon-friendadd:before {
		content: '\e72f';
	}

	.tui-icon-friendadd-fill:before {
		content: '\e72e';
	}

	.tui-icon-gps:before {
		content: '\e72d';
	}

	.tui-icon-histogram:before {
		content: '\e72c';
	}

	.tui-icon-home:before {
		content: '\e72b';
	}

	.tui-icon-home-fill:before {
		content: '\e72a';
	}

	.tui-icon-house:before {
		content: '\e729';
	}

	.tui-icon-imface:before {
		content: '\e728';
	}

	.tui-icon-imkeyboard:before {
		content: '\e727';
	}

	.tui-icon-immore:before {
		content: '\e726';
	}

	.tui-icon-imvoice:before {
		content: '\e725';
	}

	.tui-icon-ios:before {
		content: '\e724';
	}

	.tui-icon-kefu:before {
		content: '\e723';
	}

	.tui-icon-label:before {
		content: '\e722';
	}

	.tui-icon-label-fill:before {
		content: '\e721';
	}

	.tui-icon-like:before {
		content: '\e720';
	}

	.tui-icon-like-fill:before {
		content: '\e71f';
	}

	.tui-icon-link:before {
		content: '\e71e';
	}

	.tui-icon-listview:before {
		content: '\e71d';
	}

	.tui-icon-loading:before {
		content: '\e71c';
	}

	.tui-icon-location:before {
		content: '\e71b';
	}

	.tui-icon-mail:before {
		content: '\e71a';
	}

	.tui-icon-mail-fill:before {
		content: '\e719';
	}

	.tui-icon-manage:before {
		content: '\e718';
	}

	.tui-icon-manage-fill:before {
		content: '\e717';
	}

	.tui-icon-member:before {
		content: '\e716';
	}

	.tui-icon-member-fill:before {
		content: '\e715';
	}

	.tui-icon-message:before {
		content: '\e714';
	}

	.tui-icon-message-fill:before {
		content: '\e713';
	}

	.tui-icon-mobile:before {
		content: '\e712';
	}

	.tui-icon-moments:before {
		content: '\e711';
	}

	.tui-icon-more:before {
		content: '\e710';
	}

	.tui-icon-more-fill:before {
		content: '\e70f';
	}

	.tui-icon-narrow:before {
		content: '\e70e';
	}

	.tui-icon-news:before {
		content: '\e70d';
	}

	.tui-icon-news-fill:before {
		content: '\e70c';
	}

	.tui-icon-nodata:before {
		content: '\e70b';
	}

	.tui-icon-notice:before {
		content: '\e699';
	}

	.tui-icon-notice-fill:before {
		content: '\e698';
	}

	.tui-icon-offline:before {
		content: '\e697';
	}

	.tui-icon-offline-fill:before {
		content: '\e696';
	}

	.tui-icon-oppose:before {
		content: '\e695';
	}

	.tui-icon-oppose-fill:before {
		content: '\e694';
	}

	.tui-icon-order:before {
		content: '\e693';
	}

	.tui-icon-partake:before {
		content: '\e692';
	}

	.tui-icon-people:before {
		content: '\e691';
	}

	.tui-icon-people-fill:before {
		content: '\e690';
	}

	.tui-icon-pic:before {
		content: '\e68f';
	}

	.tui-icon-pic-fill:before {
		content: '\e68e';
	}

	.tui-icon-picture:before {
		content: '\e68d';
	}

	.tui-icon-pie:before {
		content: '\e68c';
	}

	.tui-icon-play:before {
		content: '\e68b';
	}

	.tui-icon-plus:before {
		content: '\e689';
	}

	.tui-icon-polygonal:before {
		content: '\e688';
	}

	.tui-icon-position:before {
		content: '\e687';
	}

	.tui-icon-position-fill:before {
		content: '\e686';
	}

	.tui-icon-pwd:before {
		content: '\e685';
	}

	.tui-icon-qq:before {
		content: '\e684';
	}

	.tui-icon-qrcode:before {
		content: '\e682';
	}

	.tui-icon-redpacket:before {
		content: '\e681';
	}

	.tui-icon-redpacket-fill:before {
		content: '\e680';
	}

	.tui-icon-reduce:before {
		content: '\e67f';
	}

	.tui-icon-refresh:before {
		content: '\e67e';
	}

	.tui-icon-revoke:before {
		content: '\e67d';
	}

	.tui-icon-satisfied:before {
		content: '\e67c';
	}

	.tui-icon-screen:before {
		content: '\e67b';
	}

	.tui-icon-search:before {
		content: '\e67a';
	}

	.tui-icon-search-2:before {
		content: '\e679';
	}

	.tui-icon-send:before {
		content: '\e678';
	}

	.tui-icon-service:before {
		content: '\e677';
	}

	.tui-icon-service-fill:before {
		content: '\e676';
	}

	.tui-icon-setup:before {
		content: '\e675';
	}

	.tui-icon-setup-fill:before {
		content: '\e674';
	}

	.tui-icon-share:before {
		content: '\e673';
	}

	.tui-icon-share-fill:before {
		content: '\e672';
	}

	.tui-icon-shield:before {
		content: '\e671';
	}

	.tui-icon-shop:before {
		content: '\e670';
	}

	.tui-icon-shop-fill:before {
		content: '\e66f';
	}

	.tui-icon-shut:before {
		content: '\e66e';
	}

	.tui-icon-signin:before {
		content: '\e66d';
	}

	.tui-icon-sina:before {
		content: '\e66c';
	}

	.tui-icon-skin:before {
		content: '\e66b';
	}

	.tui-icon-soso:before {
		content: '\e669';
	}

	.tui-icon-square:before {
		content: '\e668';
	}

	.tui-icon-square-fill:before {
		content: '\e667';
	}

	.tui-icon-square-selected:before {
		content: '\e666';
	}

	.tui-icon-star:before {
		content: '\e665';
	}

	.tui-icon-star-fill:before {
		content: '\e664';
	}

	.tui-icon-strategy:before {
		content: '\e663';
	}

	.tui-icon-sweep:before {
		content: '\e662';
	}

	.tui-icon-time:before {
		content: '\e661';
	}

	.tui-icon-time-fill:before {
		content: '\e660';
	}

	.tui-icon-todown:before {
		content: '\e65f';
	}

	.tui-icon-toleft:before {
		content: '\e65e';
	}

	.tui-icon-tool:before {
		content: '\e65d';
	}

	.tui-icon-top:before {
		content: '\e65c';
	}

	.tui-icon-toright:before {
		content: '\e65b';
	}

	.tui-icon-towardsleft:before {
		content: '\e65a';
	}

	.tui-icon-towardsright:before {
		content: '\e659';
	}

	.tui-icon-towardsright-fill:before {
		content: '\e658';
	}

	.tui-icon-transport:before {
		content: '\e657';
	}

	.tui-icon-transport-fill:before {
		content: '\e656';
	}

	.tui-icon-turningdown:before {
		content: '\e654';
	}

	.tui-icon-turningleft:before {
		content: '\e653';
	}

	.tui-icon-turningright:before {
		content: '\e652';
	}

	.tui-icon-turningup:before {
		content: '\e651';
	}

	.tui-icon-unreceive:before {
		content: '\e650';
	}

	.tui-icon-unseen:before {
		content: '\e64f';
	}

	.tui-icon-up:before {
		content: '\e64e';
	}

	.tui-icon-upload:before {
		content: '\e64c';
	}

	.tui-icon-video:before {
		content: '\e64b';
	}

	.tui-icon-voice:before {
		content: '\e649';
	}

	.tui-icon-voice-fill:before {
		content: '\e648';
	}

	.tui-icon-voipphone:before {
		content: '\e647';
	}

	.tui-icon-wallet:before {
		content: '\e646';
	}

	.tui-icon-warning:before {
		content: '\e645';
	}

	.tui-icon-wealth:before {
		content: '\e644';
	}

	.tui-icon-wealth-fill:before {
		content: '\e643';
	}

	.tui-icon-weather:before {
		content: '\e642';
	}

	.tui-icon-wechat:before {
		content: '\e641';
	}

	.tui-icon-wifi:before {
		content: '\e640';
	}
</style>
