溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
網頁上使用的圖標分可為三種：文件圖標、字體圖標和 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。這里有詳盡的入門文檔可供參考。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
