Icon: { xml: "<svg viewBox='0 0 24 24'>\ <g><polygon points='9,16.2 4.8,12 3.4,13.4 9,19 21,7 19.6,5.6'/></g>\ </svg>", fun: function (sys, items, opts) { this.attr("fill", '' + this); } }
这是一个钩形图标，组件中仅包含视图项以及函数项成份。根据函数项的内容可以知道，图标颜色由组件实例的 id 属性值给出。下面来看看如何使用该图标。
Example: { css: "#example > * { padding: 10px; background: #F9F9F9; }\ #example > *:hover { fill: #fff; background: #563d7c; }", xml: "<div>\ <Icon/>\ <Icon/>\ <Icon/>\ </div>", fun: function (sys, items, opts) { sys.example.on("click", "*", e => console.log(this + " clicked")); } }
此示例展示了三个不同颜色的图标，并且侦听了图标的点击事件，打开浏览器控制台，当点击不同图标时，可以看到相应的输出。
另外，有一种常见的 SVG 图标的封装方式，它把 SVG 文本经过 URL 编码后直接在 img 的 src 属性或者样式 background-image 中给出。就像下面这样子。
Icon: { css: "#icon {width: 16px; height: 16px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D...")}, xml: "<div/>" }
这种方式与上一种方式比起来，有两个缺点：其一，你看不出 SVG 的源文件。其二，你失去了对 SVG 图标的操作权。当然，这种方式也并非不能用。如果你不需要对图标进行后续的操作，使用这种方式也是可以接受的。另外，与之相似的一种图标使用方式是对图标 base64 编码后的内嵌引用。下面是一个简单的示范：
Icon: { xml: "<img src="https://www.jb51.net/data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIcAAA..." />" }
这种方式与上一种 SVG 图标的封装方式是类似的。不过相对于 SVG 图标组件的直接封装，你同样失去了对图标的操作权。
本系列文章基于 xmlplus 框架。如果你对 xmlplus 没有多少了解，可以访问 。这里有详尽的入门文档可供参考。