web-africa-h5/components/uni-icon/uni-icon.vue

<template>
	<view class="uni-icon" :class="['uni-icon-'+type]" :style="{color:color,'font-size':fontSize}" @click="onClick()"></view>
</template>

<script>
	export default {
		name: 'uni-icon',
		props: {
			/**
			 * 图标类型
			 */
			type: String,
			/**
			 * 图标颜色
			 */
			color: String,
			/**
			 * 图标大小
			 */
			size: [Number, String]
		},
		computed: {
			fontSize() {
				return `${this.size}px`
			}
		},
		methods: {
			onClick() {
				this.$emit('click')
			}
		}
	}
</script>

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

	.uni-icon {
		font-family: uniicons;
		font-size: 24px;
		font-weight: normal;
		font-style: normal;
		line-height: 1;
		display: inline-block;
		text-decoration: none;
		-webkit-font-smoothing: antialiased;
	}

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

	.uni-icon-contact:before {
		content: '\e100';
	}

	.uni-icon-person:before {
		content: '\e101';
	}

	.uni-icon-personadd:before {
		content: '\e102';
	}

	.uni-icon-contact-filled:before {
		content: '\e130';
	}

	.uni-icon-person-filled:before {
		content: '\e131';
	}

	.uni-icon-personadd-filled:before {
		content: '\e132';
	}

	.uni-icon-phone:before {
		content: '\e200';
	}

	.uni-icon-email:before {
		content: '\e201';
	}

	.uni-icon-chatbubble:before {
		content: '\e202';
	}

	.uni-icon-chatboxes:before {
		content: '\e203';
	}

	.uni-icon-phone-filled:before {
		content: '\e230';
	}

	.uni-icon-email-filled:before {
		content: '\e231';
	}

	.uni-icon-chatbubble-filled:before {
		content: '\e232';
	}

	.uni-icon-chatboxes-filled:before {
		content: '\e233';
	}

	.uni-icon-weibo:before {
		content: '\e260';
	}

	.uni-icon-weixin:before {
		content: '\e261';
	}

	.uni-icon-pengyouquan:before {
		content: '\e262';
	}

	.uni-icon-chat:before {
		content: '\e263';
	}

	.uni-icon-qq:before {
		content: '\e264';
	}

	.uni-icon-videocam:before {
		content: '\e300';
	}

	.uni-icon-camera:before {
		content: '\e301';
	}

	.uni-icon-mic:before {
		content: '\e302';
	}

	.uni-icon-location:before {
		content: '\e303';
	}

	.uni-icon-mic-filled:before,
	.uni-icon-speech:before {
		content: '\e332';
	}

	.uni-icon-location-filled:before {
		content: '\e333';
	}

	.uni-icon-micoff:before {
		content: '\e360';
	}

	.uni-icon-image:before {
		content: '\e363';
	}

	.uni-icon-map:before {
		content: '\e364';
	}

	.uni-icon-compose:before {
		content: '\e400';
	}

	.uni-icon-trash:before {
		content: '\e401';
	}

	.uni-icon-upload:before {
		content: '\e402';
	}

	.uni-icon-download:before {
		content: '\e403';
	}

	.uni-icon-close:before {
		content: '\e404';
	}

	.uni-icon-redo:before {
		content: '\e405';
	}

	.uni-icon-undo:before {
		content: '\e406';
	}

	.uni-icon-refresh:before {
		content: '\e407';
	}

	.uni-icon-star:before {
		content: '\e408';
	}

	.uni-icon-plus:before {
		content: '\e409';
	}

	.uni-icon-minus:before {
		content: '\e410';
	}

	.uni-icon-circle:before,
	.uni-icon-checkbox:before {
		content: '\e411';
	}

	.uni-icon-close-filled:before,
	.uni-icon-clear:before {
		content: '\e434';
	}

	.uni-icon-refresh-filled:before {
		content: '\e437';
	}

	.uni-icon-star-filled:before {
		content: '\e438';
	}

	.uni-icon-plus-filled:before {
		content: '\e439';
	}

	.uni-icon-minus-filled:before {
		content: '\e440';
	}

	.uni-icon-circle-filled:before {
		content: '\e441';
	}

	.uni-icon-checkbox-filled:before {
		content: '\e442';
	}

	.uni-icon-closeempty:before {
		content: '\e460';
	}

	.uni-icon-refreshempty:before {
		content: '\e461';
	}

	.uni-icon-reload:before {
		content: '\e462';
	}

	.uni-icon-starhalf:before {
		content: '\e463';
	}

	.uni-icon-spinner:before {
		content: '\e464';
	}

	.uni-icon-spinner-cycle:before {
		content: '\e465';
	}

	.uni-icon-search:before {
		content: '\e466';
	}

	.uni-icon-plusempty:before {
		content: '\e468';
	}

	.uni-icon-forward:before {
		content: '\e470';
	}

	.uni-icon-back:before,
	.uni-icon-left-nav:before {
		content: '\e471';
	}

	.uni-icon-checkmarkempty:before {
		content: '\e472';
	}

	.uni-icon-home:before {
		content: '\e500';
	}

	.uni-icon-navigate:before {
		content: '\e501';
	}

	.uni-icon-gear:before {
		content: '\e502';
	}

	.uni-icon-paperplane:before {
		content: '\e503';
	}

	.uni-icon-info:before {
		content: '\e504';
	}

	.uni-icon-help:before {
		content: '\e505';
	}

	.uni-icon-locked:before {
		content: '\e506';
	}

	.uni-icon-more:before {
		content: '\e507';
	}

	.uni-icon-flag:before {
		content: '\e508';
	}

	.uni-icon-home-filled:before {
		content: '\e530';
	}

	.uni-icon-gear-filled:before {
		content: '\e532';
	}

	.uni-icon-info-filled:before {
		content: '\e534';
	}

	.uni-icon-help-filled:before {
		content: '\e535';
	}

	.uni-icon-more-filled:before {
		content: '\e537';
	}

	.uni-icon-settings:before {
		content: '\e560';
	}

	.uni-icon-list:before {
		content: '\e562';
	}

	.uni-icon-bars:before {
		content: '\e563';
	}

	.uni-icon-loop:before {
		content: '\e565';
	}

	.uni-icon-paperclip:before {
		content: '\e567';
	}

	.uni-icon-eye:before {
		content: '\e568';
	}

	.uni-icon-arrowup:before {
		content: '\e580';
	}

	.uni-icon-arrowdown:before {
		content: '\e581';
	}

	.uni-icon-arrowleft:before {
		content: '\e582';
	}

	.uni-icon-arrowright:before {
		content: '\e583';
	}

	.uni-icon-arrowthinup:before {
		content: '\e584';
	}

	.uni-icon-arrowthindown:before {
		content: '\e585';
	}

	.uni-icon-arrowthinleft:before {
		content: '\e586';
	}

	.uni-icon-arrowthinright:before {
		content: '\e587';
	}

	.uni-icon-pulldown:before {
		content: '\e588';
	}

	.uni-icon-closefill:before {
		content: '\e589';
	}

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

	.uni-icon-scan:before {
		content: "\e612";
	}
</style>