GCLS_Page_Mobile/components/SvgIcon/SvgIcon.vue

<template>
	<view v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$listeners"></view>
	<svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners" :style="iconStyle">
		<use :xlink:href="iconName" />
	</svg>
</template>

<script>
	// doc: https://panjiachen.github.io/vue-element-admin-site/feature/component/svg-icon.html#usage
	import {
		isExternal,
		isNumber
	} from '@/utils/validate';

	export default {
		name: 'SvgIcon',
		props: {
			size: {
				type: [String, Number],
				default: '',
			},
			width: {
				type: [String, Number],
				default: '1rem',
			},
			height: {
				type: [String, Number],
				default: '1rem',
			},
			iconClass: {
				type: String,
				required: true,
			},
			className: {
				type: String,
				default: '',
			},
		},
		computed: {
			iconStyle() {
				return `width:${this._width};height:${this._height};`;
			},
			_width() {
				return this._getSize(this.width, this.size);
			},
			_height() {
				return this._getSize(this.height, this.size);
			},
			isExternal() {
				return isExternal(this.iconClass);
			},
			iconName() {
				return `#icon-${this.iconClass}`;
			},
			svgClass() {
				if (this.className) {
					return `svg-icon ${this.className}`;
				}
				return 'svg-icon';
			},
			styleExternalIcon() {
				return {
					mask: `url(${this.iconClass}) no-repeat 50% 50%`,
					'-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%`,
				};
			},
		},
		methods: {
			/**
			 * 获取尺寸
			 * @param {String|Number} value
			 * @param {String|Number} size
			 */
			_getSize(value, size) {
				if (size) {
					if (isNumber(size)) return `${size}px`;
					return size;
				}
				if (isNumber(value)) {
					return `${value}px`;
				}
				return value;
			},
		},
	};
</script>

<style lang="scss" scoped>
	.svg-icon {
		overflow: hidden;
		vertical-align: -0.15em;
		fill: currentColor;
	}

	.svg-external-icon {
		display: inline-block;
		background-color: currentColor;
		mask-size: cover !important;
	}
</style>