gypsy-crm-frontend-vu/components/cwg-icon.vue

<template>
	<SvgIcon :color="curColor" :icon="props.name || props.icon" class="icon" :height="size" :width="size" />
</template>

<script setup>
import { computed } from 'vue'
import useGlobalStore from '@/stores/use-global-store'
const globalStore = useGlobalStore()
const isDark = computed(() => globalStore.theme === 'dark')
import SvgIcon from "@/uni_modules/cwg-svg-icon/components/cwg-svg-icon/cwg-svg-icon.vue";
import {
	ref,
	watch
} from "vue";

const props = defineProps({
	name: {
		type: String,
		required: ""
	}, // 图标名
	icon: {
		type: String,
		required: ""
	}, // 图标名
	size: {
		type: [Number, String],
		default: 24
	},
	color: {
		type: String,
		default: ""
	},
	darkColor: {
		type: String,
		default: ""
	}
});

const curColor = computed(() => {
  return props.color ? props.color : isDark.value ? '#fff' : '#000';
});

</script>

<style scoped>
.icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: inherit;
}
</style>