elementPlus使用icon和动态渲染icon

在Element Plus中使用图标，可以使用ElIcon组件和ElTooltip组件。以下是一个使用Element Plus图标的例子：

<template>
  <div>
    <!-- 静态使用图标 -->
    <el-icon :size="20">
      <edit />
    </el-icon>
 
    <!-- 动态使用图标 -->
    <el-icon :size="20">
      <component :is="iconName" />
    </el-icon>
 
    <!-- 带有文字提示的图标 -->
    <el-tooltip content="编辑" placement="top">
      <el-icon :size="20">
        <edit />
      </el-icon>
    </el-tooltip>
  </div>
</template>
 
<script setup>
import { ref } from 'vue';
import { Edit } from '@element-plus/icons-vue';
 
// 动态改变图标
const iconName = ref('edit'); // 这里可以根据需要动态改变
</script>
 
<style>
/* 在这里添加你的样式 */
</style>

在这个例子中，我们静态地使用了edit图标，并且我们也展示了如何动态地使用图标。iconName是一个响应式数据，它可以被设置为Element Plus提供的任何图标名称。通过component和:is属性，我们可以动态地渲染任何图标。ElTooltip组件用于在鼠标悬停时显示文字提示。