一般情况下使用el-icon:
<el-icon :size="20">
<House />
</el-icon>
动态渲染使用:
<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>
export default {
data() {
return{
icons: [
{
name: "House",
color: "#409EFC",
size: 20,
},
{
name: "Plus",
color: "",
size: 24,
},
{
name: "FullScreen",
color: "#f89898",
size: ""
}
]
}
},
}
效果: