ElementUI：项目中引入自己的ICON

在Element UI中引入自定义图标通常涉及以下步骤：

1. 准备你的图标文件，确保它们是SVG格式。
2. 在项目中创建一个图标组件或者使用现有的图标库，如Font Awesome或者SVG Sprites。
3. 在Element UI中通过el-icon组件和CSS来使用这些图标。

以下是一个简单的例子，展示如何在Vue项目中使用自定义SVG图标：

1. 将SVG图标保存到项目的某个目录中，例如src/assets/icons。
2. 在Vue组件中，使用el-icon和component标签注册并展示图标：

<template>
  <el-icon :size="size" :color="color">
    <my-custom-icon />
  </el-icon>
</template>
 
<script>
import { defineComponent, ref } from 'vue';
import { ElIcon } from 'element-plus';
import MyCustomIcon from '@/assets/icons/my-custom-icon.svg'; // 引入SVG图标
 
export default defineComponent({
  components: {
    ElIcon,
    MyCustomIcon
  },
  setup() {
    const size = ref(20); // 图标大小
    const color = ref('#333'); // 图标颜色
 
    return { size, color };
  }
});
</script>

3. 确保你的Webpack配置能够处理SVG文件，并在components目录中创建一个名为MyCustomIcon的Vue组件：

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
    <!-- 这里是你的SVG路径 -->
    <path d="M..."/>
  </svg>
</template>
 
<script>
export default {
  name: 'MyCustomIcon'
}
</script>

这样就可以在你的Element UI项目中使用自定义的SVG图标了。记得替换my-custom-icon.svg路径和路径中的SVG内容以适应你的图标。