svg 与 elementUI的结合使用

在 Vue.js 项目中，你可以使用 SVG 图标与 Element UI 库相结合。Element UI 提供了 `el-icon` 组件，可以用于显示矢量图标。而 SVG 是一种矢量图形格式，可以在网页上展示各种复杂的图形。

要将 SVG 图标与 Element UI 结合使用，可以按照以下步骤进行操作：

1. 导入 SVG 图标：将 SVG 图标文件导入到 Vue 项目中。可以将 SVG 文件放在 `assets` 目录下，然后在需要使用的组件中引入 SVG 文件。

2. 创建一个自定义的 Icon 组件：在 Vue 项目中，创建一个自定义的 Icon 组件，用于显示 SVG 图标。可以使用 `el-icon` 组件作为容器，并设置宽高和背景图为引入的 SVG 文件。

3. 使用 Icon 组件：在 Element UI 的组件中使用自定义的 Icon 组件。可以通过设置 `icon` 属性，并传入自定义的 Icon 组件名称来显示对应的 SVG 图标。

下面是一个简单的示例代码：

<template>
  <div>
    <el-button>
      <custom-icon icon="svg-icon"></custom-icon>
      Button with SVG Icon
    </el-button>
  </div>
</template>

<script>
import CustomIcon from './CustomIcon.vue';

export default {
  components: {
    CustomIcon,
  },
};
</script>

<template>
  <div class="custom-icon">
    <i class="el-icon" :style="`background-image: url(${icon});`"></i>
  </div>
</template>

<script>
export default {
  props: {
    icon: {
      type: String,
      required: true,
    },
  },
};
</script>

在上面的示例中，`CustomIcon` 组件接收一个 `icon` 属性，用于指定 SVG 图标的路径。然后在按钮组件中使用 `el-icon` 组件，并通过 `custom-icon` 组件渲染 SVG 图标。

这样，你就可以在 Element UI 的组件中使用 SVG 图标了。当然，具体的实现方式还可以根据你的需求进行调整和扩展。