xmlplus组件设计系列之图标（ICON）(1）
网页上使用的图标分可为三种：文件图标、字体图标和SVG图标。对于文件图标，下面仅以PNG格式来说明。
PNG图标
对于PNG图标的引用，有两种方式。一种是直接由HTML元素img的src属性给出。下面是一个简单的示例。
Icon:{
css:"#icon{width:68px;height:68px;}",
xml:"
这里假定图标文件与组件所在文件在同级目录中，于是可以按如下的方式便捷地引用所需的图标。注意组件Icon巧妙地使id属性值与图片文件名关联，这样可以避免创建额外的属性。
Example:{
css:"#example>*{padding:10px;background:#F9F9F9;}",
xml:"\
另一种引用PNG图标的方式是给相应的对象添加background-image样式，并且由样式中给出图标所在路径。下面是一个简单的示例。
Icon:{
css:"#icon{width:68px;height:68px;}",
xml:"
这种形式与前面由img标签给出的图标有许多相似之处。不同的是，前者动态指定的是img标签的src值，而后者动态指定的则是div元素的css样式。该组件与前面给出的Icon组件的使用方式完全一致，这里就不重复了。
对于以上给出的组件Icon，使用的是离散的图标文件。实际应用中，通常给出的是一个包含许多图标的PNG文件。这种情况下该如何构建图标组件呢？请看下面给出的一种较为实用的方案。
Icon:{
css:"#msg{background-position:00;}\
#home{background-position:-48px0;}\
#contact{background-position:-96px0;}\
#icon{width:68px;height:68px;background-image:url(icons.png);}",
xml:"
此组件在样式项css中直接给出了图标文件所在路径，以及各种图标在文件内的位置。并且图标实例id与相应图标类名对应。当然，组件的使用方式与前面给出的组件是一致的。
下面给出的是另一种组件设计方案，它把位置信息移到了函数项中。此方案是可行的，但组件的执行效率不如前者。该组件每次实例化都要生成位置信息一次，而对于前者，由于样式项在组件实例化时，仅生成一次，所以保证了组件的执行性能。
Icon:{
css:"#icon{width:48px;height:48px;background-image:url(icons.png);}",
xml:"
字体图标
字体图标通过引入包含图标的字体文件，将图标像文字一样使用。它与PNG图标相比，最关键一点在于它的矢量性。字体图标的引用方式有两种：通过类名的引用方式以及直接引用unicode的方式。
通过类名引用
这种类型的图标内容定义在样式项中，HTML元素通过类名进行关联。
Msg:{
css:"#msg{font-size:48px;width:68px;height:68px;line-height:48px;}\
#msg:before{content:'\\e608';}",
xml:"
直接引用unicode
这种引用方式与前一种在本质上没什么不同，它只是将图标内容由样式项转移到视图项中而已。
Home:{
css:"#home{font-size:48px;width:68px;height:68px;line-height:48px;}",
xml:""
}
下面给出的示例展示了两种不同的引用字体图标的方式。注意，此示例简化了样式项中与兼容性相关的内容，详情请查阅配套源码。
Example:{
css:"@font-face{font-family:'iconfont';url('iconfont.ttf')format('truetype');}\
#msg,#home{font-family:'iconfont';font-style:normal;}\
#example>*{display:inline-block;padding:10px;background:#F9F9F9;}",
xml:"\
SVG图标
最后来看看我们的重头戏，如何封装以及使用SVG图标。在xmlplus中，SVG图标是推荐的图标使用形式，它允许直接嵌入代码，无需额外引用相关文件。
通过xlink:href引用
对于这种方式，首先你需要一个svg图标集，其包含的内容大概是下面这样子。
svg图标集有两种存在方式，一个是以文件形式存在，这时xlink:href属性值需要明确指明文件的url，下面是一个示例。
另一种形式是，图标集直接存在于页内，这种方式叫做页内引用，它无需指明url，只要指定相应symbol的id就好了。
对svg图标的直接封装
相对于通过xlink:href引用图标，使用xmlplus的组件化技术直接封装会是一种更好的方式。请看下面的一个SVG图标组件。
Icon:{
xml:"\
这是一个钩形图标，组件中仅包含视图项以及函数项成份。根据函数项的内容可以知道，图标颜色由组件实例的id属性值给出。下面来看看如何使用该图标。
Example:{
css:"#example>*{padding:10px;background:#F9F9F9;}\
#example>*:hover{fill:#fff;background:#563d7c;}",
xml:"\