distribution-uni/components/cmd-icon/cmd-icon.vue

<template>
	<view :class="[prefixClass, prefixClass+'-'+type]" :style="setStyle" @tap="$_click"></view>
</template>

<script>
	/**  
	 * 图标组件  
	 * @description 用于展示 icon。该组件的 icon 图形基于 Webfont，因此可任意放大、改变颜色。  
	 * @tutorial https://ext.dcloud.net.cn/plugin?id=175  
	 * @property {String} prefix-class 自定义字体图标库前缀 - 默认cmd-icon  
	 * @property {String} type 图标图案类型 - 列如：home、add  
	 * @property {String} color 图标颜色 - 默认白色  
	 * @property {Number} size 图标大小 - 默认24，单位px  
	 * @event {Function} click 图标组件点击事件  
	 * @example <cmd-icon type="bell" size="30" color="#654321"></cmd-icon>  
	 */
	export default {
		name: 'cmd-icon',

		props: {
			/**
			 * 自定义字体图标库前缀
			 */
			prefixClass: {
				type: String,
				default: 'cmd-icon'
			},
			/**
			 * 图标类型
			 */
			type: String,
			/**
			 * 图标颜色
			 */
			color: {
				type: String,
				default: '#fff'
			},
			/**
			 * 图标大小
			 */
			size: {
				type: [Number, String],
				default: '24'
			}
		},

		computed: {
			setStyle() {
				return `color:${this.color};
				font-size:${this.size}px;
				line-height:${this.size}px`
			}
		},

		methods: {
			$_click(e) {
				this.$emit('click', e)
			}
		}
	}
</script>

<style>
	@font-face {
		font-family: cmdicons;
		src: url("data:application/x-font-woff;charset=utf-8;base64,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
	}

	.cmd-icon {
		display: inline-block;
		font-family: cmdicons;
		font-style: normal;
		font-weight: 400;
		font-variant: normal;
		text-transform: none;
		text-rendering: auto;
		text-align: center;
		line-height: 1;
		-webkit-font-smoothing: antialiased;
		vertical-align: middle;
	}

	.cmd-icon-add::before {
		content: "\e960";
	}

	.cmd-icon-add-circle::before {
		content: "\e901";
	}

	.cmd-icon-subtract::before {
		content: "\e962";
	}

	.cmd-icon-subtract-circle::before {
		content: "\e961";
	}

	.cmd-icon-align-center::before {
		content: "\e902";
	}

	.cmd-icon-align-left::before {
		content: "\e903";
	}

	.cmd-icon-align-right::before {
		content: "\e904";
	}

	.cmd-icon-arrow-down::before {
		content: "\e905";
	}

	.cmd-icon-arrow-left::before {
		content: "\e907";
	}

	.cmd-icon-arrow-right::before {
		content: "\e908";
	}

	.cmd-icon-arrow-up::before {
		content: "\e909";
	}

	.cmd-icon-bell::before {
		content: "\e90a";
	}

	.cmd-icon-blocked::before {
		content: "\e90b";
	}

	.cmd-icon-bookmark::before {
		content: "\e90c";
	}

	.cmd-icon-bullet-list::before {
		content: "\e90d";
	}

	.cmd-icon-calendar::before {
		content: "\e90e";
	}

	.cmd-icon-camera::before {
		content: "\e90f";
	}

	.cmd-icon-check-circle::before {
		content: "\e910";
	}

	.cmd-icon-chevron-down::before {
		content: "\e911";
	}

	.cmd-icon-chevron-left::before {
		content: "\e912";
	}

	.cmd-icon-chevron-right::before {
		content: "\e913";
	}

	.cmd-icon-chevron-up::before {
		content: "\e914";
	}

	.cmd-icon-clock::before {
		content: "\e915";
	}

	.cmd-icon-close-circle::before {
		content: "\e916";
	}

	.cmd-icon-close::before {
		content: "\e917";
	}

	.cmd-icon-credit-card::before {
		content: "\e918";
	}

	.cmd-icon-download-cloud::before {
		content: "\e919";
	}

	.cmd-icon-download::before {
		content: "\e91a";
	}

	.cmd-icon-edit::before {
		content: "\e91b";
	}

	.cmd-icon-equalizer::before {
		content: "\e91c";
	}

	.cmd-icon-external-link::before {
		content: "\e91d";
	}

	.cmd-icon-eye::before {
		content: "\e91e";
	}

	.cmd-icon-file-audio::before {
		content: "\e91f";
	}

	.cmd-icon-file-code::before {
		content: "\e920";
	}

	.cmd-icon-file-generic::before {
		content: "\e921";
	}

	.cmd-icon-file-jpg::before {
		content: "\e923";
	}

	.cmd-icon-file-new::before {
		content: "\e924";
	}

	.cmd-icon-file-png::before {
		content: "\e925";
	}

	.cmd-icon-file-svg::before {
		content: "\e926";
	}

	.cmd-icon-file-video::before {
		content: "\e927";
	}

	.cmd-icon-filter::before {
		content: "\e928";
	}

	.cmd-icon-folder::before {
		content: "\e929";
	}

	.cmd-icon-font-color::before {
		content: "\e92a";
	}

	.cmd-icon-heart::before {
		content: "\e92b";
	}

	.cmd-icon-help::before {
		content: "\e92c";
	}

	.cmd-icon-home::before {
		content: "\e92d";
	}

	.cmd-icon-image::before {
		content: "\e92e";
	}

	.cmd-icon-iphone-x::before {
		content: "\e92f";
	}

	.cmd-icon-iphone::before {
		content: "\e930";
	}

	.cmd-icon-lightning-bolt::before {
		content: "\e931";
	}

	.cmd-icon-link::before {
		content: "\e932";
	}

	.cmd-icon-list::before {
		content: "\e933";
	}

	.cmd-icon-lock::before {
		content: "\e934";
	}

	.cmd-icon-mail::before {
		content: "\e935";
	}

	.cmd-icon-map-pin::before {
		content: "\e936";
	}

	.cmd-icon-menu::before {
		content: "\e937";
	}

	.cmd-icon-message::before {
		content: "\e938";
	}

	.cmd-icon-money::before {
		content: "\e939";
	}

	.cmd-icon-next::before {
		content: "\e93a";
	}

	.cmd-icon-numbered-list::before {
		content: "\e93b";
	}

	.cmd-icon-pause::before {
		content: "\e93c";
	}

	.cmd-icon-phone::before {
		content: "\e93d";
	}

	.cmd-icon-play::before {
		content: "\e93e";
	}

	.cmd-icon-playlist::before {
		content: "\e93f";
	}

	.cmd-icon-prev::before {
		content: "\e940";
	}

	.cmd-icon-reload::before {
		content: "\e941";
	}

	.cmd-icon-repecmd-play::before {
		content: "\e942";
	}

	.cmd-icon-search::before {
		content: "\e943";
	}

	.cmd-icon-settings::before {
		content: "\e944";
	}

	.cmd-icon-share-2::before {
		content: "\e945";
	}

	.cmd-icon-share::before {
		content: "\e946";
	}

	.cmd-icon-shopping-bag-2::before {
		content: "\e947";
	}

	.cmd-icon-shopping-bag::before {
		content: "\e948";
	}

	.cmd-icon-shopping-cart::before {
		content: "\e949";
	}

	.cmd-icon-shuffle-play::before {
		content: "\e94a";
	}

	.cmd-icon-sketch::before {
		content: "\e94b";
	}

	.cmd-icon-sound::before {
		content: "\e94c";
	}

	.cmd-icon-star::before {
		content: "\e94d";
	}

	.cmd-icon-stop::before {
		content: "\e94e";
	}

	.cmd-icon-streaming::before {
		content: "\e94f";
	}

	.cmd-icon-tag::before {
		content: "\e950";
	}

	.cmd-icon-tags::before {
		content: "\e951";
	}

	.cmd-icon-text-italic::before {
		content: "\e952";
	}

	.cmd-icon-text-strikethrough::before {
		content: "\e953";
	}

	.cmd-icon-text-underline::before {
		content: "\e954";
	}

	.cmd-icon-trash::before {
		content: "\e955";
	}

	.cmd-icon-upload::before {
		content: "\e956";
	}

	.cmd-icon-user::before {
		content: "\e957";
	}

	.cmd-icon-video::before {
		content: "\e958";
	}

	.cmd-icon-volume-minus::before {
		content: "\e959";
	}

	.cmd-icon-volume-off::before {
		content: "\e95a";
	}

	.cmd-icon-volume-plus::before {
		content: "\e95b";
	}

	.cmd-icon-analytics::before {
		content: "\e95c";
	}

	.cmd-icon-star-2::before {
		content: "\e95d";
	}

	.cmd-icon-check::before {
		content: "\e95e";
	}

	.cmd-icon-heart-2::before {
		content: "\e95f";
	}

	.cmd-icon-loading::before {
		content: "\e967";
	}

	.cmd-icon-loading-2::before {
		content: "\e966";
	}

	.cmd-icon-loading-3::before {
		content: "\e963";
	}

	.cmd-icon-alert-circle::before {
		content: "\e964";
	}
</style>