<template>
	<div>
		<!-- <component  is="Edit" style="width: 2rem; margin-left: 2rem" v-for="(name,index) in iconList.icons"></component> -->
		<div style="display: flex;flex-wrap: wrap">
			<div v-for="(name,index) in iconList.icons" @click="click(name)" class="k">
				<component :is="name" style="width: 2rem;" :index="index" :key="index"></component>
				<div class="name">{{name}}</div>
			</div>


		</div>

	</div>
</template>

<script setup>
	import * as ElementPlusIconsVue from '@element-plus/icons-vue'
	import {
		reactive,
		ref,
		toRefs
	} from 'vue'
	const getData = () => {
		let icons = []
		for (const name in ElementPlusIconsVue) {
			//  console.error(name)
			icons.push(name)
		}
		return icons
	}
	const iconsData = reactive(getData())
	const iconList = reactive({
		icons: iconsData
	})
	const data = toRefs(iconList)
	const emit = defineEmits(['changeMenu'])
	const click=(name)=>{
		 emit('changeMenu', name)
	}
	// console.log(iconList)
</script>

<style scoped>
	.k {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		border: 1px solid var(--color-border1);
		text-align: center;
		color: var(--el-text-color-regular);
		height: 90px;
		width: 102px;
		font-size: 13px;
		border-right: 1px solid var(--el-border-color);
		border-bottom: 1px solid var(--el-border-color);
		transition: background-color var(--el-transition-duration);
		cursor:pointer
		
	}
	.k:hover{
		border: 2px solid #ccc;
	}

	.name {}
</style>