網頁上使用的圖標分可為三種：文件圖標、字體圖標和 SVG 圖標。對于文件圖標，下面僅以 PNG 格式來說明。
PNG 圖標
對于 PNG 圖標的引用，有兩種方式。一種是直接由 HTML 元素 img 的 src 屬性給出。下面是一個簡單的示例。
Icon: { css: "#icon { width: 68px; height: 68px; }", xml: "<img id='icon'/>", fun: function (sys, items, opts) { this.attr("src", this + ".png"); }}這里假定圖標文件與組件所在文件在同級目錄中，于是可以按如下的方式便捷地引用所需的圖標。注意組件 Icon 巧妙地使 id 屬性值與圖片文件名關聯，這樣可以避免創建額外的屬性。
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 圖標的方式是給相應的對象添加 background-image 樣式，并且由樣式中給出圖標所在路徑。下面是一個簡單的示例。
Icon: { css: "#icon { width: 68px; height: 68px; }", xml: "<div id='icon'/>", fun: function (sys, items, opts) { this.css("background-image", this + ".png"); }}這種形式與前面由 img 標簽給出的圖標有許多相似之處。不同的是，前者動態指定的是 img 標簽的 src 值 ，而后者動態指定的則是 div 元素的 css 樣式。該組件與前面給出的 Icon 組件的使用方式完全一致，這里就不重復了。
對于以上給出的組件 Icon，使用的是離散的圖標文件。實際應用中，通常給出的是一個包含許多圖標的 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); }}此組件在樣式項 css 中直接給出了圖標文件所在路徑，以及各種圖標在文件內的位置。并且圖標實例 id 與相應圖標類名對應。當然，組件的使用方式與前面給出的組件是一致的。
下面給出的是另一種組件設計方案，它把位置信息移到了函數項中。此方案是可行的，但組件的執行效率不如前者。該組件每次實例化都要生成位置信息一次，而對于前者，由于樣式項在組件實例化時，僅生成一次，所以保證了組件的執行性能。
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]); }}字體圖標
字體圖標通過引入包含圖標的字體文件，將圖標像文字一樣使用。它與 PNG 圖標相比，最關鍵一點在于它的矢量性。字體圖標的引用方式有兩種：通過類名的引用方式以及直接引用 unicode 的方式。
通過類名引用
這種類型的圖標內容定義在樣式項中，HTML 元素通過類名進行關聯。
Msg: { css: "#msg { font-size: 48px; width: 68px; height: 68px; line-height: 48px; }/ #msg:before { content: '//e608'; }", xml: "<div id='msg'/>"}直接引用unicode
這種引用方式與前一種在本質上沒什么不同，它只是將圖標內容由樣式項轉移到視圖項中而已。
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 圖標
最后來看看我們的重頭戲，如何封裝以及使用 SVG 圖標。在 xmlplus 中，SVG 圖標是推薦的圖標使用形式，它允許直接嵌入代碼，無需額外引用相關文件。
通過 xlink:href 引用
對于這種方式，首先你需要一個 svg 圖標集，其包含的內容大概是下面這樣子。
<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 圖標集有兩種存在方式，一個是以文件形式存在，這時 xlink:href 屬性值需要明確指明文件的 url，下面是一個示例。
<svg> <use xlink:/>/</svg>
另一種形式是，圖標集直接存在于頁內，這種方式叫做頁內引用，它無需指明 url，只要指定相應 symbol 的 id 就好了。
<svg> <use xlink:href='#icon'/>/</svg>
對svg 圖標的直接封裝
相對于通過 xlink:href 引用圖標，使用 xmlplus 的組件化技術直接封裝會是一種更好的方式。請看下面的一個 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); }}這是一個鉤形圖標，組件中僅包含視圖項以及函數項成份。根據函數項的內容可以知道，圖標顏色由組件實例的 id 屬性值給出。下面來看看如何使用該圖標。
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")); }}此示例展示了三個不同顏色的圖標，并且偵聽了圖標的點擊事件，打開瀏覽器控制臺，當點擊不同圖標時，可以看到相應的輸出。
另外，有一種常見的 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 id='icon'/>"}這種方式與上一種方式比起來，有兩個缺點：其一，你看不出 SVG 的源文件。其二，你失去了對 SVG 圖標的操作權。當然，這種方式也并非不能用。如果你不需要對圖標進行后續的操作，使用這種方式也是可以接受的。另外，與之相似的一種圖標使用方式是對圖標 base64 編碼后的內嵌引用。下面是一個簡單的示范：
Icon: { xml: "<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIcAAA..." />"}這種方式與上一種 SVG 圖標的封裝方式是類似的。不過相對于 SVG 圖標組件的直接封裝，你同樣失去了對圖標的操作權。
本系列文章基于 xmlplus 框架。如果你對 xmlplus 沒有多少了解，可以訪問 www.xmlplus.cn。這里有詳盡的入門文檔可供參考。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
