網(wǎng)頁(yè)上使用的圖標(biāo)分可為三種：文件圖標(biāo)、字體圖標(biāo)和 SVG 圖標(biāo)。對(duì)于文件圖標(biāo)，下面僅以 PNG 格式來(lái)說(shuō)明。

PNG 圖標(biāo)

對(duì)于 PNG 圖標(biāo)的引用，有兩種方式。一種是直接由 HTML 元素 img 的 src 屬性給出。下面是一個(gè)簡(jiǎn)單的示例。

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

這里假定圖標(biāo)文件與組件所在文件在同級(jí)目錄中，于是可以按如下的方式便捷地引用所需的圖標(biāo)。注意組件 Icon 巧妙地使 id 屬性值與圖片文件名關(guān)聯(lián)，這樣可以避免創(chuàng)建額外的屬性。

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

另一種引用 PNG 圖標(biāo)的方式是給相應(yīng)的對(duì)象添加 background-image 樣式，并且由樣式中給出圖標(biāo)所在路徑。下面是一個(gè)簡(jiǎn)單的示例。

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

這種形式與前面由 img 標(biāo)簽給出的圖標(biāo)有許多相似之處。不同的是，前者動(dòng)態(tài)指定的是 img 標(biāo)簽的 src 值 ，而后者動(dòng)態(tài)指定的則是 div 元素的 css 樣式。該組件與前面給出的 Icon 組件的使用方式完全一致，這里就不重復(fù)了。

對(duì)于以上給出的組件 Icon，使用的是離散的圖標(biāo)文件。實(shí)際應(yīng)用中，通常給出的是一個(gè)包含許多圖標(biāo)的 PNG 文件。這種情況下該如何構(gòu)建圖標(biāo)組件呢？請(qǐng)看下面給出的一種較為實(shí)用的方案。

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);
  }
}

此組件在樣式項(xiàng) css 中直接給出了圖標(biāo)文件所在路徑，以及各種圖標(biāo)在文件內(nèi)的位置。并且圖標(biāo)實(shí)例 id 與相應(yīng)圖標(biāo)類(lèi)名對(duì)應(yīng)。當(dāng)然，組件的使用方式與前面給出的組件是一致的。

下面給出的是另一種組件設(shè)計(jì)方案，它把位置信息移到了函數(shù)項(xiàng)中。此方案是可行的，但組件的執(zhí)行效率不如前者。該組件每次實(shí)例化都要生成位置信息一次，而對(duì)于前者，由于樣式項(xiàng)在組件實(shí)例化時(shí)，僅生成一次，所以保證了組件的執(zhí)行性能。

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]);
  }
}

字體圖標(biāo)

字體圖標(biāo)通過(guò)引入包含圖標(biāo)的字體文件，將圖標(biāo)像文字一樣使用。它與 PNG 圖標(biāo)相比，最關(guān)鍵一點(diǎn)在于它的矢量性。字體圖標(biāo)的引用方式有兩種：通過(guò)類(lèi)名的引用方式以及直接引用 unicode 的方式。

通過(guò)類(lèi)名引用

這種類(lèi)型的圖標(biāo)內(nèi)容定義在樣式項(xiàng)中，HTML 元素通過(guò)類(lèi)名進(jìn)行關(guān)聯(lián)。

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

直接引用unicode

這種引用方式與前一種在本質(zhì)上沒(méi)什么不同，它只是將圖標(biāo)內(nèi)容由樣式項(xiàng)轉(zhuǎn)移到視圖項(xiàng)中而已。

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

下面給出的示例展示了兩種不同的引用字體圖標(biāo)的方式。注意，此示例簡(jiǎn)化了樣式項(xiàng)中與兼容性相關(guān)的內(nèi)容，詳情請(qǐng)查閱配套源碼。

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 圖標(biāo)

最后來(lái)看看我們的重頭戲，如何封裝以及使用 SVG 圖標(biāo)。在 xmlplus 中，SVG 圖標(biāo)是推薦的圖標(biāo)使用形式，它允許直接嵌入代碼，無(wú)需額外引用相關(guān)文件。

通過(guò) xlink:href 引用

對(duì)于這種方式，首先你需要一個(gè) svg 圖標(biāo)集，其包含的內(nèi)容大概是下面這樣子。

<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 圖標(biāo)集有兩種存在方式，一個(gè)是以文件形式存在，這時(shí) xlink:href 屬性值需要明確指明文件的 url，下面是一個(gè)示例。

<svg>
  <use xlink:/>\
</svg>

另一種形式是，圖標(biāo)集直接存在于頁(yè)內(nèi)，這種方式叫做頁(yè)內(nèi)引用，它無(wú)需指明 url，只要指定相應(yīng) symbol 的 id 就好了。

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

對(duì)svg 圖標(biāo)的直接封裝

相對(duì)于通過(guò) xlink:href 引用圖標(biāo)，使用 xmlplus 的組件化技術(shù)直接封裝會(huì)是一種更好的方式。請(qǐng)看下面的一個(gè) SVG 圖標(biāo)組件。

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);
  }
}

這是一個(gè)鉤形圖標(biāo)，組件中僅包含視圖項(xiàng)以及函數(shù)項(xiàng)成份。根據(jù)函數(shù)項(xiàng)的內(nèi)容可以知道，圖標(biāo)顏色由組件實(shí)例的 id 屬性值給出。下面來(lái)看看如何使用該圖標(biāo)。

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"));
  }
}

此示例展示了三個(gè)不同顏色的圖標(biāo)，并且偵聽(tīng)了圖標(biāo)的點(diǎn)擊事件，打開(kāi)瀏覽器控制臺(tái)，當(dāng)點(diǎn)擊不同圖標(biāo)時(shí)，可以看到相應(yīng)的輸出。

另外，有一種常見(jiàn)的 SVG 圖標(biāo)的封裝方式，它把 SVG 文本經(jīng)過(guò) 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 id='icon'/>"
}

這種方式與上一種方式比起來(lái)，有兩個(gè)缺點(diǎn)：其一，你看不出 SVG 的源文件。其二，你失去了對(duì) SVG 圖標(biāo)的操作權(quán)。當(dāng)然，這種方式也并非不能用。如果你不需要對(duì)圖標(biāo)進(jìn)行后續(xù)的操作，使用這種方式也是可以接受的。另外，與之相似的一種圖標(biāo)使用方式是對(duì)圖標(biāo) base64 編碼后的內(nèi)嵌引用。下面是一個(gè)簡(jiǎn)單的示范：

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

這種方式與上一種 SVG 圖標(biāo)的封裝方式是類(lèi)似的。不過(guò)相對(duì)于 SVG 圖標(biāo)組件的直接封裝，你同樣失去了對(duì)圖標(biāo)的操作權(quán)。

本系列文章基于 xmlplus 框架。如果你對(duì) xmlplus 沒(méi)有多少了解，可以訪問(wèn) www.xmlplus.cn。這里有詳盡的入門(mén)文檔可供參考。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論