在Vue3中使用Element Plus Icon图标的几种方式

在Vue 3中使用Element Plus Icon图标的几种方式如下：

1. 直接通过组件使用：

<template>
  <el-icon :size="size" :color="color">
    <edit />
  </el-icon>
</template>
 
<script setup>
import { Edit } from '@element-plus/icons-vue'
 
const size = 20
const color = '#409EFF'
</script>

2. 使用图标名称字符串：

<template>
  <el-icon :size="size" :color="color">
    <component :is="iconName" />
  </el-icon>
</template>
 
<script setup>
import * as Icons from '@element-plus/icons-vue'
 
const iconName = 'Edit'
const size = 20
const color = '#409EFF'
 
// 确保图标名称是一个有效的组件
const IconComponent = Icons[iconName]
</script>

3. 使用Svg Icon组件：

<template>
  <el-icon :size="size" :color="color">
    <svg-icon name="edit" />
  </el-icon>
</template>
 
<script setup>
const size = 20
const color = '#409EFF'
</script>

确保已经安装了Element Plus和对应的图标库：

npm install element-plus --save
npm install @element-plus/icons-vue --save

如果使用第二种方式，你需要在项目中定义SvgIcon组件或者使用现成的库，如svg-sprite-loader来加载SVG图标。