原生引入element使用抽屉不想用element带的icon

如果你想要在项目中使用Element UI的抽屉功能，但是不想直接依赖它自带的图标，你可以自定义图标或者使用SVG、Font Awesome等外部图标库。步骤如下：

1. **导入元素抽屉组件**：首先，在你的项目中引入Element UI的`el-dialog`抽屉组件。

import { ElDialog } from 'element-plus';

2. **自定义图标**：
- 如果你想用SVG，可以在CSS中创建一个新的伪元素，并设置其内容为SVG路径。例如：

     .custom-dialog-icon::before {
       content: url('path/to/your/icon.svg');
       /* 根据需要调整样式 */
     }

- 如果使用字体图标库（如Font Awesome），先安装并引入库，然后使用相应字符作为图标类名。例如：

     <i class="fas fa-folder"></i>

3. **替换抽屉的默认图标**：
- 在你的HTML模板中，替换`ElDialog`的默认图标属性，将自定义图标类绑定到`v-model`上：

<el-dialog :title="dialogTitle" v-model="showDrawer" :close-on-click-modal="false">
  <!-- ... -->
  <div slot="footer" class="dialog-footer">
    <button @click="handleClose" :class="{ 'dialog-icon': true, 'custom-dialog-icon': true }">关闭</button>
  </div>
</el-dialog>

4. **处理打开和关闭操作**：
更新你的JS代码，确保`handleClose`函数使用了正确的图标。比如，如果是自定义SVG，可能需要动态改变元素的`innerHTML`。

记得在CSS中给`.custom-dialog-icon`添加适当的样式，使其看起来像Element UI的默认图标。