elementuiplus button 使用矢量图

Element Plus 是 Vue.js 的 UI 组件库 Element UI 的增强版，它提供了一个更现代化的设计风格和一些新的功能。在 Element Plus 中，Button 组件支持使用矢量图，这是因为其设计上倾向于更轻量级和响应式。

要在 Element Plus 的 Button 组件中使用矢量图，你可以通过 `icon` 属性来设置。Element Plus 提供了图标系统，可以接受 Font Awesome 或者 Element Plus 自带的 SVG 图标名。例如：

<el-button type="primary" icon="el-icon-menu"></el-button>

这里，`el-icon-menu` 就是一个内置的矢量图图标名称。如果你想使用自定义的矢量图，可以先下载SVG文件，然后转换为Base64格式，作为字符串值传递给 `icon`:

<template>
  <el-button type="primary">
    <svg :width="24" :height="24" class="custom-svg">
      <use :href="customSvgData"></use>
    </svg>
  </el-button>
</template>

<script setup>
import { ref } from 'vue';
const customSvgData = ref('');
// 加载并设置自定义矢量图数据
</script>

别忘了在 CSS 中添加 `.custom-svg` 类来自定义矢量图的样式。