QXTstore/QXTfront/uni_modules/lime-icon/components/l-icon/l-icon.uvue

<template>
	<text :key="iconCode" class="l-icon" :class="[classes, lClass]" :style="[styles, lStyle]" v-if="!isImage && !isIconify && !isSVG">{{iconCode}}</text>
	<image class="l-icon" :class="[classes, lClass]" :style="[styles, lStyle]" v-else-if="(!isSVG && !hasIconify) && isImage" :src="iconUrl"></image>
	<l-svg class="l-icon" :class="[classes, lClass]" :style="[styles, lStyle]" :color="color" :src="iconUrl" v-else :web="web" @error="imageError" @load="imageload"></l-svg>
</template>
<script lang="uts" setup>
	/**
	 * LimeIcon 图标
	 * @description ICON集
	 * <br> 插件类型：LIconComponentPublicInstance 
	 * @tutorial https://ext.dcloud.net.cn/plugin?id=14057
	 * @property {String} name 图标名称
	 * @property {String} color 颜色
	 * @property {String} size 尺寸
	 * @property {String} prefix 字体图标前缀  
	 * @property {Boolean} inherit 是否继承颜色 
	 * @property {Boolean} web 原生 app(nvue,uvue) 是否使用web渲染  
	 * @event {Function} click 点击事件
	 */
	
	import { addUnit } from '@/uni_modules/lime-shared/addUnit';
	import { IconCollection } from './types';
	import { icons } from './icons'
	// defineOptions({
	// 	name: 'l-icon'
	// })
	const name = 'l-icon'
	const IconifyURL : string = 'https://api.iconify.design/';
	const $iconsHost : string | null = uni.getStorageSync('$limeIconsHost') as string | null

	const props = defineProps({
		name: {
			type: String,
			default: '',
			required: true,
			// validator: (value: string) : boolean => {
			// 	// 确保是字符串类型且不为空
			// 	return typeof value == 'string' && value.trim().length > 0
			// }
		},
		color: {
			type: String,
			// default: ''
		},
		size: {
			type: [String, Number],
		},
		prefix: {
			type: String,
			default: ''
		},
		lClass: {
			type: String,
			default: ''
		},
		// 对安卓IOS无效
		inherit: {
			type: Boolean,
			default: true
		},
		web: {
			type: Boolean,
			default: false
		},
		lStyle: {
			type: [String, Object, Array],
			default: ''
		},
	})

	// const emits = defineEmits(['click'])
	const $iconCollection = inject<IconCollection>('$iconCollection', {has: false, icons: new Map<string, any|null>()} as IconCollection)
	// #ifndef APP-ANDROID
	const innerName = computed(():string => props.name ?? '')
	// #endif
	// #ifdef APP-ANDROID
	const innerName = computed(():string => props.name)
	// #endif
	const collectionIcon = computed(():string|null => {
		return $iconCollection.icons.get(innerName.value) as string | null
	})
	const webviewRef = ref<UniWebViewElement | null>(null)
	const hasHost = computed<boolean>(() : boolean => innerName.value.indexOf('/') != -1)
	const isIconify = computed<boolean>(() : boolean => {
		return !hasHost.value && innerName.value.includes(':')
	})
	
	const hasIconify = computed<boolean>(() : boolean => {
		// #ifdef APP && uniVersion >= 4.82
		return isIconify.value //&& props.color != null
		// #endif
		// #ifndef APP && uniVersion >= 4.82
		return isIconify.value
		// #endif
	})
	
	const isImage = computed<boolean>(() : boolean => {
		// #ifdef APP && uniVersion >= 4.82
		return /\.(jpe?g|png|gif|bmp|webp|tiff|svg?)$/i.test(innerName.value) || /^data:image\/(jpeg|png|gif|bmp|webp|tiff|svg)/.test(innerName.value) || isIconify.value
		// #endif
		// #ifndef APP && uniVersion >= 4.82
		return /\.(jpe?g|png|gif|bmp|webp|tiff?)$/i.test(innerName.value) || /^data:image\/(jpeg|png|gif|bmp|webp|tiff);base64,/.test(innerName.value)
		// #endif
	})
	const isSVG = computed<boolean>(():boolean => {
		// #ifdef APP && uniVersion >= 4.82
		// 由于base64 安卓image尺寸不对
		if(innerName.value.startsWith('data:image/svg+xml')) return true
		// if(props.color == null) return false
		return (/\.svg$/i.test(innerName.value) || innerName.value.startsWith('data:image/svg+xml') || innerName.value.startsWith('<svg'))
		// #endif
		// #ifndef APP && uniVersion >= 4.82
		return /\.svg$/i.test(innerName.value) || innerName.value.startsWith('data:image/svg+xml') || innerName.value.startsWith('<svg')
		// #endif
	})
	const classes = computed<Map<string, any>>(() : Map<string, any> => {
		const cls = new Map<string, any>()
		cls.set(`${name}--font`, !isImage.value && !isIconify.value && !isSVG.value)
		cls.set(`${name}--image`, isImage.value || isIconify.value || isSVG.value)
		cls.set(props.prefix, props.prefix.length > 0)
		cls.set(props.lClass, props.lClass.length > 0)
		// #ifndef UNI-APP-X && APP
		cls.set(`is-inherit`, (isIconify.value) && (props.color && props.color.length > 0 || props.inherit))
		// #endif
		return cls
	})
	const styles = computed<Map<string, any>>(() : Map<string, any> => {
		const style = new Map<string, any>();
		const size = addUnit(props.size)
		// #ifdef APP
		if ((props.color != '' && props.color != null) && !isImage.value && !isIconify.value) {
			style.set('color', props.color!)
		}
		// #endif
		// #ifndef APP 
		if(props.color) {
			style.set('color', props.color!)
		}
		// #endif
		if (size != null) {
			if (isImage.value || isIconify.value || isSVG.value) {
				style.set('height', size)
				style.set('width', size)
			} else {
				style.set('font-size', size)
			}
			
		}
		return style
	})
	const iconCode = computed<string>(() : string => {
		return icons.value.get(innerName.value) as string | null ?? (/[^\x00-\x7F]/.test(innerName.value) ? innerName.value : '')
	})
	const isError = ref(false)
	const cacheMap = new Map<string, string>()
	const iconUrl = computed(():string => {
		const hasIconsHost = $iconsHost != null && $iconsHost != '' 
		// const hasIconCollection = $iconCollection.has
		if(isImage.value && !isIconify.value) {
			return hasHost.value ? innerName.value : ($iconsHost ?? '') + innerName.value
		} else if(isIconify.value) {
			// 防止重绘
			if(cacheMap.has(innerName.value) && !isError.value) {
				return cacheMap.get(innerName.value)!
			}
			// 如果存在collectionIcon则使用 
			// 如果设置的路径加载失败 就使用网络地址 就使用iconify api
			const _host = `${hasIconsHost ? $iconsHost : IconifyURL}`
			const _icon =collectionIcon.value ?? _host + `${innerName.value}.svg`.replace(/:/g, '/') 
			cacheMap.set(innerName.value, _icon)
			return _icon
		} else if(isSVG.value) {
			return (/\.svg$/i.test(innerName.value) && $iconsHost != null && !hasHost.value ? $iconsHost : '') + innerName.value.replace(/'/g, '"')
		} else {
			return ''
		}
	})
		
	const imageError = () => {
		isError.value = true
	}
	const imageload = () => {
		isError.value = false
	}
	
</script>
<style lang="scss">
	@import './index.scss';
</style>