el-input加入svg图标

要在 el-input 中加入 SVG 图标，可以使用 el-input 内置的 prefix 或 suffix 插槽来实现。下面是具体的实现步骤：

1. 在 el-input 标签中添加 prefix 或 suffix 属性，并在其中加入 SVG 图标代码，例如：

<el-input placeholder="请输入内容" prefix="<svg class='icon' aria-hidden='true'><use xlink:href='#icon-search'></use></svg>">
</el-input>

2. 在 CSS 样式中定义 .icon 类，设置 SVG 图标的样式：

.icon {
  width: 1em;
  height: 1em;
  vertical-align: middle;
  fill: currentColor;
  overflow: hidden;
}

其中，#icon-search 是 SVG 图标的 ID，可以替换为自己的 SVG 图标 ID。

注意，使用 SVG 图标时需要确保 SVG 图标代码的正确性，并且需要在页面中引入 SVG 图标的定义。可以使用 iconfont 等工具生成 SVG 图标，并将 SVG 图标的定义放在页面的头部或者引入外部 SVG 图标库。

相关问题

el-popover包裹svg图标，svg图标不显示了

这个问题可能是由于 `el-popover` 组件的 `z-index` 属性导致的，你可以尝试在 `el-popover` 组件中设置一个较高的 `z-index` 值，例如：

.el-popover__wrapper svg {
  z-index: 9999;
}

如果这个方法不起作用，你可以尝试使用 `position: absolute` 或 `position: relative` 来设置 `el-popover` 和 `svg` 元素的位置，以确保它们之间的层叠顺序正确。同时，也需要确保 svg 图标的路径和文件名都是正确的。

el-icon 使用svg

`el-icon` 是 Element UI 中的一个组件，它用于显示矢量图标，通常基于 SVG (Scalable Vector Graphics) 格式。SVG 是一种基于XML的标准图形语言，能够提供高质量、矢量化的图像，大小可以自由缩放而不会失真。在 Element UI 中，`el-icon` 允许开发者通过一组预定义的名称引用内置的SVG图标，或者自定义SVG代码，甚至可以直接导入外部SVG文件。

例如，要在一个Element UI的按钮上使用 `el-icon`，你可以这样做：

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

这会显示一个默认的下拉菜单图标。如果你需要更复杂的SVG，你可以将其放在 `src` 属性中：

<el-icon :icon="'url(your-custom-svg.svg)'"></el-icon>

注意在使用自定义SVG时，确保文件路径是正确的，并且SVG编码格式支持在网页上直接展示。