<template>
	<!-- :style="{ color: color }" -->
	<svg :class="svgClass" v-bind="$attrs"  aria-hidden="true">
		<use :xlink:href="iconName"></use>
	</svg>
</template>

<script   lang="ts">
import { reactive, computed, defineProps, ref, toRefs, defineComponent } from 'vue';
import { log } from 'console';
// import { SetUp } from '@element-plus/icons-vue/dist/types';
export default {
	name: 'svgIconTr',
	props: {
		name: {
			type: String,
			required: true,
		},
		className: {
			type: String,
		},
		Color: {
			type: String,
		},
	},

	setup(props) {
		let { name, className ,Color} = toRefs(props);
		const css = reactive({
			name: name.value,

			classname: className.value,
			Color:Color.value
		});

		const iconName = computed(() => `#icon-${name.value}`);
		const svgClass = computed(() => {
			if (className.value) {
				return `svg-icon-tr icon-${className.value}`;
			} else {
				return 'svg-icontr';
			}
		});

		return {
			iconName,
			svgClass,
			css,
		};
	},
};
</script>
 
<style scoped lang="scss" >
.svg-icon-tr {
	width: 1.2em;
	height: 1.2em;
	fill:  v-bind('css.Color') !important;
	// fill-rule:currentColor;
	overflow: hidden;
	vertical-align: middle;
}

// .svg-icon-tr {
// 	width:  v-bind('css.width') !important;
// 	height: v-bind('css.height') !important;
// 	fill: v-bind('css.color') !important;
// 	color: v-bind('css.color') !important;
// 	vertical-align: middle;

// }
</style>
