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

<template>
	<ElButton
		:type="type"
		:loading="loading"
		:disabled="disabled"
		:size="size"
		:class="{ square }"
		v-bind="$attrs"
	>
		<Icon :icon="icon" :color="iconColor"></Icon>
		<slot>{{ label }}</slot>
	</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' | 'large' | 'default'
		loading?: boolean
		type?: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'default'
		disabled?: boolean
		square?: boolean
		label?: string
	}>(),
	{
		size: 'default',
		type: 'default',
		loading: false
	}
)
</script>

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