<template>
	<text :class='"i-icon" + (center ? " center" : "")' :style="{ color, fontSize: size }" @click="handleClick">
		{{icon[name]}}
	</text>
</template>
<script>
	import icon from "./js/icon.js"
	// #ifdef APP-NVUE
	var domModule = weex.requireModule("dom");
	// 这里的CDN和css中的CDN一致
	domModule.addRule('fontFace', {
		'fontFamily': 'remixicon',
		src: "url('https://cdn.jsdelivr.net/npm/remixicon@4.5.0/fonts/remixicon.ttf?t=1590207869815')"
	});
	// #endif
	export default {
		props: {
			name: {
				type: String,
				default: "",
			},
			color: {
				type: String,
				default: "black",
			},
			size: {
				type: String,
				default: "40rpx",
			},
			center: {
				type: Boolean,
				default: false,
			}
		},
		data() {
			return {
				icon
			}
		},
		methods: {
			handleClick() {
				this.$emit("click")
			}
		}
	};
</script>
<style scoped>
	/* #ifndef APP-NVUE */
	@font-face {
	  font-family: remixicon;
	  src: url('data:font/woff2;charset=utf-8;base64,[encoded data, 232208 characters]') format('woff2');
	}
	/* #endif */
	.i-icon {
		display: inline-block;
		font-family: remixicon !important;
		text-decoration: none;
		text-align: center;
		font-style: normal;
		line-height: 1em;
	}
	.i-icon.center {
		vertical-align: middle;
	}
</style>
