动态使用 Element Plus 中 el-icon 组件的方法

通过 component 组件的 is 属性动态渲染 el-icon。

<template>
	<el-icon :size="20">
	<template v-for="(item, index) in icons" :key="index">
		<el-icon :color="item.color" :size="item.size">
    		<component :is="item.name"></component>
    	</el-icon>
    </template>
 </el-icon>
</template>

<script>
export default {
    
    
	data() {
    
    
        return {
    
    
            icons: [
                {
    
    
                    name: "House",
                    color: "#409EFC",
                    size: 20,
                },
                {
    
    
                    name: "Plus",
                    color: "",
                    size: 24,
                },
                {
    
    
                    name: "FullScreen",
                    color: "#f89898",
                    size: ""
                }
            ]
        }
    }
}
</script>