Icon: {
  css: "#icon { width: 68px; height: 68px; }",
  xml: "<img id='icon'/>",
  fun: function (sys, items, opts) {
    this.attr("src", this + ".png");
  }
}

Example: {
  css: "#example > * { padding: 10px; background: #F9F9F9; }",
  xml: "<div id='example' class='bs-example'>\
      <Icon id='msg'/>\
      <Icon id='home'/>\
      <Icon id='contact'/>\
     </div>"
}

Icon: {
  css: "#icon { width: 68px; height: 68px; }",
  xml: "<div id='icon'/>",
  fun: function (sys, items, opts) {
    this.css("background-image", this + ".png");
  }
}

Icon: {
  css: "#msg { background-position: 0 0; }\
     #home { background-position: -48px 0; }\
     #contact { background-position: -96px 0; }\
     #icon { width: 68px; height: 68px; background-image: url(icons.png); }",
  xml: "<div id='icon'/>",
  fun: function (sys, items, opts) {
    sys.icon.addClass("#" + this);
  }
}

Icon: {
  css: "#icon { width: 48px; height: 48px; background-image: url(icons.png); }",
  xml: "<div id='icon'/>",
  fun: function (sys, items, opts) {
    var positions = {
      "msg": "0 0",
      "home": "-48px 0",
      "contact": "-96px 0"
    }
    sys.icon.css("background-position", positions[this]);
  }
}

Msg: {
  css: "#msg { font-size: 48px; width: 68px; height: 68px; line-height: 48px; }\
     #msg:before { content: '\\e608'; }",
  xml: "<div id='msg'/>"
}

Home: {
  css: "#home { font-size: 48px; width: 68px; height: 68px; line-height: 48px; }",
  xml: "<div id='home'><div/>"
}

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: "<div id='example'>\
      <Msg id='msg'/>\
      <Home id='home'/>\
     </div>"
}

<svg>
  <symbol id="icon" width='48px' height='48px' 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>\
  </symbol>
  <!-- 还可以有更多的symbol -->
</svg>

<svg>
  <use xlink:href='http://example.com/file.svg#icon'/>\
</svg>

<svg>
  <use xlink:href='#icon'/>\
</svg>

Icon: {
  xml: "<svg width='48px' height='48px' 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);
  }
}

Example: {
  css: "#example > * { padding: 10px; background: #F9F9F9; }\
     #example > *:hover { fill: #fff; background: #563d7c; }",
  xml: "<div id='example'>\
      <Icon id='red'/>\
      <Icon id='green'/>\
      <Icon id='blue'/>\
     </div>",
  fun: function (sys, items, opts) {
    sys.example.on("click", "*", e => console.log(this + " clicked"));
  }
}

Icon: {
  css: "#icon {width: 16px; height: 16px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D...")},
  xml: "<div id='icon'/>"
}

Icon: {
  xml: "<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIcAAA..." />"
}