共计 3018 个字符，预计需要花费 8 分钟才能阅读完成。
这是 Jerry 2021 年的第 27 篇文章，也是汪子熙公众号总共第 298 篇原创文章。
近日，一位 SAP 合作伙伴的开发人员，向我征询一个对于 SAP Fiori 利用里图标的应用问题。
这位开发人员在 SAP 某规范 Fiori 利用里，发现了一个图标(例如下图红色高亮区域所示的图标), 心愿在本人开发的 Fiori 利用里也应用这个图标，然而不晓得其对应的 sap-icon:// 属性值。
开发人员心愿找到一种繁难的方法，可能依据 SAP Fiori 利用页面上渲染进去的图标，反查出其对应的 sap-icon:// 值。
在 SAP UI5 图标控件 (Icon) 里, 给其 src 属性绑定上对应的 sap-icon:// 值，就能在渲染出的 SAP Fiori 页面上，看到对应的图案了。
比方 sap-icon://syringe 对应下图这个注射器图标。至于运行时，Icon 控件 src 属性值对应的图案是如何被渲染进去的，该技术细节由 SAP UI5 框架去实现，个别的 SAP UI5 利用开发人员无需理解。
本文介绍四种通过 SAP Fiori 页面渲染出的图标，反查出其 sap-icon:// 值的办法。
办法 1：在 SAP Icon Explorer 中手动查找
SAP 公布了六百多种规范的图标，能间接在 Fiori 利用中应用。这些图标可能在一个称为 SAP Icon Explorer 的网页中对立浏览。
https://openui5.hana.ondemand…
假如咱们在 SAP Icon Explorer 里找到了和咱们在某 SAP Fiori 利用里看到的截然不同的图标，则单击该图标：
在左边明细页面，就能找到其 sap-icon:// 值：
显然，这种办法效率较低，因为须要用肉眼，在 SAP Icon Explorer 中数以百计的图标中去人工匹配。
办法 2：在 SAP Fiori 源程序中进行搜寻
这种形式的前提是，咱们可能拿到待查找 SAP Fiori 利用的源代码。
应用 Visual Studio Code 等编辑器关上 SAP Fiori 利用的源代码，搜寻关键字 sap-icon://, 则编辑器会列出该 Fiori 利用应用到的所有图标的 sap-icon:// 值。
这种办法的局限性在于：
(1) 如果一个 Fiori 利用应用了相当多图标，那么开发人员依然须要在搜寻后果集里逐个手动过滤，最终定位到本人真正想要查找的那一个图标；
(2) 该办法无奈 100% 保障可能找到本人须要的图标。
以下图为例，该利用通过 SAP Fiori Elements 开发而成，图中高亮的几个图标，是 SAP Fiori Elements List Report 模板内定义的规范图标，并没有蕴含在利用开发人员通过 Application Generator 创立进去的本地工程文件里。因而这些图标对应的 sap-icon:// , 根本无法通过本地工程源代码搜寻的形式取得。
办法 3：通过运行时单步调试 SAP UI5 渲染器的形式查找
Jerry 之前的文章 深刻学习 SAP UI5 框架代码系列之二：UI5 控件的渲染器 已经介绍过，每个 SAP UI5 控件都有专属的渲染器，在运行时负责依据 SAP UI5 控件的实例数据，生成对应的 HTML 源代码。
在 Icon 控件的渲染器实现，IconRenderer.js 的 render 办法里设置断点。
运行时断点触发，第 61 行变量 vIconInfo 里蕴含的 uri 字段的值，即是咱们要找的 sap-icon://product.
这种办法依然有肯定的局限性：一个 SAP Fiori 利用，简直不大可能只应用繁多图标。换言之，每个图标的渲染，都会触发 IconRenderer.js 的 render 办法。
比方上面这个断点的触发，是为了渲染 action-settings 这个图标：
即 SAP Fiori Elements 利用里，点击之后能进行用户个性化设置的齿轮图标。
当待查找 SAP Fiori 利用里蕴含的图标个数较多时，咱们通常须要进行一段时间的调试，能力最终找到冀望的图标值。
办法 4：通过 SAP Fiori 利用界面图标的 Unicode 值反向查找
这是 Jerry 最喜爱的一个方法，能 100% 精确而疾速地定位到待查找的图标，而且无需调试。毛病在于步骤稍嫌繁琐。
在 Chrome 开发者工具的 Elements 标签页里，找到 Icon 控件最终渲染进去的 span 元素，发现其 data-sap-ui-icon-content 的值，显示为一个普通用户不可读的小方框。
把整个 span 元素的 HTML 代码拷贝到记事本里：
以 UTF-16 LE 的 Encoding 格局保留。
我选取 UTF-16 的编码模式，是因为其较 UTF-8 相比，大部分字符都以固定长度即 2 字节的形式存储，这样我检索起来比拟不便。
UTF-16 LE，即 Little Endian，小端存储，高位字节放在高地址示意。
用 UltraEdit 或者 WinHex 之类的工具软件，关上以 UTF-16 另存的记事本文件。找到之前在浏览器和记事本里，均无奈失常显示的 data-sap-ui-icon-content 属性值，其 Unicode 为 E011.
还记得办法 3 里提到的 Icon 控件的渲染器 IconRenderer.js 么？在它的旁边就是 IconPool.js，该文件里硬编码了 SAP Fiori 反对的所有规范图标的名称，及其对应的 Unicode 值。
Chrome 开发者工具里关上该文件，依据方才找到的 Unicode 值 e011 进行搜寻，立刻得出 该 Unicode 值对应的图标名称为 product：
再返回 SAP Icon Explorer 进行核查，至此能确认咱们要查找的图标，其 sap-icon:// 值为 product，Unicode 值为 0xe011，和咱们在 IconPool.js 里找到的值完全一致。
心愿本文能帮忙大家对 SAP Fiori Icon 的渲染原理和应用办法有一些根底的理解，感激浏览。
更多浏览
- SAP Fiori 利用索引大全
- Fiori Fundamentals 和 SAP UI5 Web Components
- 为什么 SAP GUI 里的传统事务码能通过 Fiori Launchpad 启动并运行在浏览器里
- 一步步把 SAP GUI 的事务码配置到 SAP Fiori Launchpad 里
- SAP UI5 利用开发人员理解 UI5 框架代码的意义
- SAP UI5 module 懒加载机制
- SAP UI5 控件渲染机制
- HTML 原生事件 VS SAP UI5 Semantic 事件
- SAP UI5 控件元数据的元数据实现
- SAP UI5 控件的实例数据批改和读取逻辑
- SAP UI5 控件数据绑定的实现原理
- SAP UI5 控件数据绑定的三种模式：One Way, Two Way 和 OneTime 实现原理比拟
- SAP UI5 OData 流言粉碎机：极短时间内发送两个 Odata request, 前一个会主动被 cancel 掉吗
- SAP UI5 和 Angular 的函数防抖 (Debounce) 和函数节流 (Throttle) 实现原理介绍
- SAP UI 渲染模式：客户端渲染 VS 服务器端渲染
- SAP UI 的加载动画成果和幽灵设计(Ghost Design)
- 介绍一个能开发简略 SAP UI5 利用的在线 IDE：StackBlitz
- SAP CRM Fiori 利用和 SAP Commerce Cloud (电商云) UI 如何通过调整 CSS 来扭转 UI 显示格调
- SAP 产品一脉相承的 UI 加强思路，在 SAP Commerce Cloud(电商云) UI 加强实现中的体现
- 如何分辨 SAP Fiori Launchpad 里的虚实 Fiori 利用
- 在没有任何前端开发教训的根底上, 创立第一个 SAP Fiori Elements 利用