1 需求
首页界面根据展示的属性内容，需要修改与之相关联的图标。
2 具备条件
el-admin具备更改图标的功能，功能模块放到了组件管理中。
3 操作步骤实例
3.1 下载SVG文件
在阿里云图标网iconfont上下载需要的图标。
选择图标类型为扁平。
下载的时候，注意不要选择颜色属性，这样文件就不会有fill属性，因为el-admin项目会继承元素的颜色属性，带上后不会生效。
3.2 修改SVG文件
下载到的SVG源文件数据如下：
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg t="1661484058858" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="21778" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"> <path d="M940.030202 515.074137H83.969798c-14.33594 0-27.647884 6.143974-37.887841 15.359936-10.239957 10.239957-15.359935 23.551901-15.359936 37.887841v401.406314c0 29.695875 23.551901 53.247776 53.247777 53.247776h857.0844c14.33594 0 27.647884-6.143974 37.887841-15.359935 10.239957-10.239957 15.359935-23.551901 15.359935-37.887841V568.321914c0-14.33594-6.143974-27.647884-15.359935-37.887841-10.239957-9.215961-24.575897-15.359935-38.911837-15.359936zM324.608787 836.608787H163.841462V675.841462h160.767325v160.767325zM860.158538 756.737123H432.128335V675.841462H860.158538v80.895661zM727.039097 401.410615c-126.975467-95.2316-303.102727-95.2316-430.078194 0-21.50391 16.383931-52.223781 14.33594-70.655703-5.119979-22.527905-23.551901-19.455918-61.439742 6.143974-80.89566 164.863308-123.90348 393.214348-123.90348 559.101652 0 25.599892 19.455918 29.695875 57.343759 6.143974 80.89566-18.431923 20.479914-49.151794 21.50391-70.655703 5.119979z m35.839849 31.743867" p-id="21779"></path> <path d="M831.486658 219.13938C645.119441 69.636008 378.880559 69.636008 192.513342 219.13938c-21.50391 17.407927-53.247776 15.359935-71.679699-4.095982-20.479914-22.527905-18.431923-57.343759 5.119978-76.799678 225.279054-183.29523 548.861695-184.319226 775.164745-3.071987 25.599892 20.479914 26.623888 58.367755 4.095982 80.89566-20.479914 19.455918-52.223781 20.479914-73.72769 3.071987z m36.863845 32.767863" p-id="21780"></path> </svg>
把冗余的信息去掉，保留纯正的SVG元素信息即可，如下所示。
<svg t="1661484058858" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="128" height="128"> <path d="M940.030202 515.074137H83.969798c-14.33594 0-27.647884 6.143974-37.887841 15.359936-10.239957 10.239957-15.359935 23.551901-15.359936 37.887841v401.406314c0 29.695875 23.551901 53.247776 53.247777 53.247776h857.0844c14.33594 0 27.647884-6.143974 37.887841-15.359935 10.239957-10.239957 15.359935-23.551901 15.359935-37.887841V568.321914c0-14.33594-6.143974-27.647884-15.359935-37.887841-10.239957-9.215961-24.575897-15.359935-38.911837-15.359936zM324.608787 836.608787H163.841462V675.841462h160.767325v160.767325zM860.158538 756.737123H432.128335V675.841462H860.158538v80.895661zM727.039097 401.410615c-126.975467-95.2316-303.102727-95.2316-430.078194 0-21.50391 16.383931-52.223781 14.33594-70.655703-5.119979-22.527905-23.551901-19.455918-61.439742 6.143974-80.89566 164.863308-123.90348 393.214348-123.90348 559.101652 0 25.599892 19.455918 29.695875 57.343759 6.143974 80.89566-18.431923 20.479914-49.151794 21.50391-70.655703 5.119979z m35.839849 31.743867" p-id="21779"></path> <path d="M831.486658 219.13938C645.119441 69.636008 378.880559 69.636008 192.513342 219.13938c-21.50391 17.407927-53.247776 15.359935-71.679699-4.095982-20.479914-22.527905-18.431923-57.343759 5.119978-76.799678 225.279054-183.29523 548.861695-184.319226 775.164745-3.071987 25.599892 20.479914 26.623888 58.367755 4.095982 80.89566-20.479914 19.455918-52.223781 20.479914-73.72769 3.071987z m36.863845 32.767863"></path> </svg>
3.3 放到图标目录下
将下载的文件重命名后放入到文件夹src/assets/icons/svg下。
3.4 引用
使用元素标签<svg-icon />引用图标，
<svg-icon icon-class="图标名称，如app.svg，就写'app'即可"></svg-icon>
4 效果
4.1 普通状态
4.2 悬浮状态
