如何在 Element Plus 中使用自定义 icon 组件 (非组件库内置icon)

在 Element Plus 中使用自定义图标组件，首先需要确保你有一个图标组件，它可以接收一个图标名称作为参数，并返回相应的图标元素。以下是一个简单的自定义图标组件的例子：

<template>
  <span :class="`icon-${name}`"></span>
</template>
 
<script>
export default {
  name: 'MyIcon',
  props: {
    name: {
      type: String,
      required: true
    }
  }
}
</script>
 
<style scoped>
/* 这里添加样式来定义每个图标 */
.icon-home {
  background: url('/path/to/home-icon.svg');
}
 
.icon-user {
  background: url('/path/to/user-icon.svg');
}
 
/* 其他图标样式 */
</style>

然后，你可以在你的应用中像使用 Element Plus 的内置图标组件一样使用自定义图标组件：

<template>
  <el-button>
    <my-icon name="home"></my-icon>
    首页
  </el-button>
</template>
 
<script>
import MyIcon from './components/MyIcon.vue';
 
export default {
  components: {
    MyIcon
  }
}
</script>

请注意，自定义图标组件需要你根据实际的图标库或图像系统来定义样式和加载机制。上面的例子使用了背景图像，但你也可以使用字体图标库或 SVG Sprites。确保你的图标组件可以接收图标名称并相应地渲染出正确的图标。