el-input加入svg图标
时间: 2023-07-05 22:21:30 浏览: 373
电力图标svg.zip
3星 · 编辑精心推荐
要在 el-input 中加入 SVG 图标,可以使用 el-input 内置的 prefix 或 suffix 插槽来实现。下面是具体的实现步骤:
1. 在 el-input 标签中添加 prefix 或 suffix 属性,并在其中加入 SVG 图标代码,例如:
```html
<el-input placeholder="请输入内容" prefix="<svg class='icon' aria-hidden='true'><use xlink:href='#icon-search'></use></svg>">
</el-input>
```
2. 在 CSS 样式中定义 .icon 类,设置 SVG 图标的样式:
```css
.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 图标库。
阅读全文