SAP UI5 Web Component的图标实现

例子:我的SAP UI5 Web Component开发而成的React应用上,显示了这个加号图标:

SAP UI5 Web Component的图标实现


在React Component里引入加号图标:

SAP UI5 Web Component的图标实现


在此处给ShellBarItem的icon属性赋以add按钮:

SAP UI5 Web Component的图标实现

运行时效果如下:


SAP UI5 Web Component的图标实现


我们再回过头看看在代码里导入的add.js的内容:

SAP UI5 Web Component的图标实现

pathData里包含的值,其实就是基于SVG绘制而成的加号图标在浏览器里对应的g标签的d属性,如下图所示:


SAP UI5 Web Component的图标实现


分享到:


相關文章: