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" :width="iconSize" :height="iconSize"></Icon>
		<slot>{{ label }}</slot>
	</ElButton>
</template>

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

const props = 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
	}
)

const iconSize = computed(() => (props.size === 'large' ? 20 : props.size === 'small' ? 12 : 16))
</script>

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