玩转Element图标！给输入框加个独特自定义图标，瞬间个性加倍
2023-03-18 19:18:06
如何在 Element UI 中使用自定义图标
在前端开发中，我们经常会遇到需要为输入框添加图标的需求。Element UI 提供了便捷的方法来使用其自带的图标，但有时我们可能需要使用自定义图标，例如公司徽标或产品标志。本文将详细介绍如何在 Element UI 中使用自定义图标，从准备工作到实际使用。
准备工作
在开始配置自定义图标之前，需要准备以下材料：
- 自定义图标： 可以是图片格式（如 PNG、JPG、SVG）或字体图标。
- 图标库： 本地或在线图标库，可提供丰富的图标选择，例如：
配置图标
本地图标
如果使用本地图标，需要将其复制到 Element UI 的图标目录：
node_modules/element-ui/packages/theme-chalk/src/icon.scss
并在 icon.scss 文件中添加以下代码：
@import "./base.scss";
.el-icon-xxx {
background-image: url(./xxx.png);
}
其中，xxx 为图标的文件名，请替换为实际的图标名称。
在线图标
对于在线图标，在图标库中找到所需的图标，然后复制代码：
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xxx"></use>
</svg>
将此代码粘贴到 icon.scss 文件中，并修改 <use> 元素的 xlink:href 属性，指向图标的名称：
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-你的图标名称"></use>
</svg>
使用图标
配置好图标后，即可在 input 组件中使用了：
<el-input prefix-icon="el-icon-xxx"></el-input>
其中，el-icon-xxx 为图标的名称。
字体图标
除了本地和在线图标，我们还可以使用字体图标。字体图标是一种矢量图标，可以缩放和着色而不会失真。
要使用字体图标，需要安装一个字体图标库，如：
- Font Awesome
- Material Design Icons
- Ionicons
安装后，将字体图标库的 CSS 文件和字体文件引入项目：
<link rel="stylesheet" href="path/to/font-awesome.min.css">
<script src="path/to/font-awesome.min.js"></script>
然后，在 input 组件中使用字体图标：
<el-input prefix-icon="fa fa-xxx"></el-input>
其中，fa fa-xxx 为字体图标的名称。
总结
使用自定义图标可以增强 Element UI 中输入框的视觉效果和个性化。通过使用本地图标、在线图标或字体图标，我们可以轻松地将图标添加到输入框的前缀或后缀位置。
常见问题解答
1. 如何将图标垂直居中显示？
可以通过调整 line-height 属性来垂直居中图标，例如：
.el-icon-xxx {
line-height: 1.8em;
}
2. 自定义图标显示不出来怎么办？
- 确认图标路径是否正确。
- 检查图标文件是否损坏或格式不正确。
- 确保已编译 Element UI 样式。
3. 如何更改图标大小？
可以使用 font-size 属性调整图标大小，例如：
.el-icon-xxx {
font-size: 18px;
}
4. 如何使用 CSS 变量更改图标颜色？
可以通过创建 CSS 变量并将其赋值给图标颜色，例如：
:root {
--icon-color: #0099ff;
}
.el-icon-xxx {
color: var(--icon-color);
}
5. 如何将图标作为按钮使用？
可以在 el-button 组件中使用图标，例如：
<el-button type="primary" icon="el-icon-xxx">提交</el-button>
