Vue3 + vite + ElementUI 自定义 svg 图标

在Vue3 + Vite + ElementUI项目中，要自定义SVG图标，你可以通过以下步骤实现：

1. 创建一个用于存放SVG图标的文件夹，例如src/assets/icons。
2. 将你的自定义SVG图标保存到这个文件夹中。
3. 创建一个Vue组件，用于渲染SVG图标。
4. 在ElementUI的<el-button>或其他组件上使用这个图标组件。

下面是具体实现的代码示例：

// src/components/SvgIcon.vue
<template>
  <svg :class="svgClass" aria-hidden="true">
    <use :xlink:href="iconName"></use>
  </svg>
</template>
 
<script setup>
import { computed } from 'vue';
 
const props = defineProps({
  iconClass: {
    type: String,
    required: true
  }
});
 
const svgClass = computed(() => {
  return `svg-icon ${props.iconClass}`;
});
 
const iconName = computed(() => {
  return `#${props.iconClass}`;
});
</script>
 
<style scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  fill: currentColor;
  overflow: hidden;
}
</style>

// 在某个组件中使用SvgIcon组件
<template>
  <el-button type="primary">
    <SvgIcon iconClass="your-icon-name" />
    按钮文本
  </el-button>
</template>
 
<script setup>
import SvgIcon from '@/components/SvgIcon.vue';
</script>

确保你的SVG文件已经被正确引入到项目中，例如通过Vite的import.meta.url或者在vite.config.js中配置SVG作为资源导入。

在vite-svgr插件或类似的SVG导入工具的帮助下，你可以直接在JavaScript中导入SVG文件作为字符串，并将其作为模板字符串使用。这样可以更方便地管理和使用SVG图标。