【vue3 element-plus的循环图标】

element-plus

vue3 在用Element Plus布局页面时，遇到了一个图标循环加载的问题。开始不知道如何渲染图标，以为像ElementUI 一样可以通过class进行渲染图标，发现无法使用，让后我发现引用的图标是组件，组件的话就可以使用 进行渲染了.

<el-row>
              <el-col :span="12" v-for="(option,index) in card.options" :key="index">
                <el-button
                  type="primary"
                  text
                  style="height: 80px; font-size: 36px"
                >
                  <el-icon>
                    <component :is="option.icon"/>
                  </el-icon>
                  <span>{{ option.text }}</span>
                </el-button>
              </el-col>
            </el-row>
<script>
data() {
    return {
      cards: {
        left: [
          {
            title: "园区门户",
            options: [
              { icon: "Tickets", text: "园区统计" },
              { icon: "Checked", text: "园区状态" },
              { icon: "Tickets", text: "园区统计" },
              { icon: "Checked", text: "园区状态" },
            ],
          },
          {
            title: "园区服务",
            options: [
              { icon: "Guide", text: "疫情防控" },
              { icon: "Grid", text: "信息发布" },
            ],
          },
          {
            title: "物业管理",
            options: [
              { icon: "Histogram", text: "物业统计" },
              { icon: "List", text: "报修统计" },
            ],
          },
        ],
        right: [
          {
            title: "人员管理",
            options: [
              { icon: "User", text: "人员统计" },
              { icon: "Folder", text: "更多" },
            ],
          },
          {
            title: "车辆管理",
            options: [
              { icon: "Guide", text: "停车管理" },
              { icon: "Folder", text: "更多" },
            ],
          },
          {
            title: "园区安防",
            options: [
              { icon: "", text: "监控管理" },
              { icon: "", text: "安全巡检" },
            ],
          },
        ],
      },
    };
  },
</script>