shalu-agent-workflow/packages/ui/components/icon-button/IconButton.vue

<template>
	<ElButton :type="type" :loading="loading" :disabled="disabled" :size="size" :class="{ square }">
		<Icon :name="icon" :color="iconColor"></Icon>
	</ElButton>
</template>

<script setup lang="ts">
import { ElButton } from 'element-plus'
import Icon from '../icon/Icon.vue'

withDefaults(
	defineProps<{
		icon: string
		iconColor?: string
		size?: 'small' | 'medium' | 'large'
		loading?: boolean
		type?: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'default'
		disabled?: boolean
		square?: boolean
	}>(),
	{
		size: 'medium',
		type: 'default',
		loading: false
	}
)
</script>

<style lang="less" scoped>
.square {
	.el-button {
		padding: 8px;
		&--large {
			padding: 12px;
		}
		&--small {
			padding: 5px;
		}
	}
}
</style>