<template>
	<div
		class="tools-icon"
		:class="[`is-${name}`]"
		:style="{
			height: size + 'px',
			width: size + 'px',
			backgroundColor: color
		}"
	>
		<cl-svg :name="name" />
	</div>
</template>

<script lang="ts" setup name="tools-icon">
const props = defineProps({
	name: String,
	size: {
		type: Number,
		default: 20
	},
	color: String
});
</script>

<style lang="scss" scoped>
.tools-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 100%;
	background-color: var(--el-color-primary);
	color: #fff;
	font-size: 14px;
	flex-shrink: 0;

	&.is-add {
		background-color: var(--el-color-info-light-5);
	}
}
</style>
