DevExtreme擁有高性能的HTML5 / JavaScript小部件集合，使您可以利用現(xiàn)代Web開發(fā)堆棧（包括React，Angular，ASP.NET Core，jQuery，Knockout等）構(gòu)建交互式的Web應(yīng)用程序，該套件附帶功能齊全的數(shù)據(jù)網(wǎng)格、交互式圖表小部件、數(shù)據(jù)編輯器等。

在本文中，我們將為大家介紹如何使用DevExtreme組件來自定義圖標(biāo)，歡迎下載最新版組件體驗(yàn)！

DevExtreme v22.2正式版下載

DevExpress技術(shù)交流群6：600715373      歡迎一起進(jìn)群討論

自定義圖標(biāo)

由于DevExtreme圖標(biāo)是作為圖標(biāo)字體發(fā)布的，因此可以使用與自定義文本內(nèi)容相同的CSS屬性對它們進(jìn)行自定義：顏色、字體大小、字體粗細(xì)、文本對其等，這對于UI組件中使用的圖標(biāo)是正確的...

jQuery

HTML

<div id="saveButton"></div>

JavaSciprt

$(function() {
$("#saveButton").dxButton({
icon: "save",
text: "Save"
});
});

CSS

#saveButton .dx-icon {
font-size: 24px;
color: blue;
}

ASP.NET MVC Controls

．.． 以及用于任何其他HTML元素的圖標(biāo)：

HTML

<i class="dx-icon-email dx-icon-custom-style"></i>

CSS

.dx-icon-custom-style {
font-size: 24px;
color: blue;
}

dx-icon是一個CSS類，當(dāng)DevExtreme UI組件將圖標(biāo)元素呈現(xiàn)到DOM中時添加到圖標(biāo)元素中。開發(fā)人員不能用另一個名字來稱呼它，然而對于其他HTML元素中的圖標(biāo)則不是這樣的，在本例中，可以為類使用任何名稱，如前一個示例所示。

自定義圖像作為圖標(biāo)

UI組件的icon屬性接受URL，因此開發(fā)人員可以將圖像的URL分配給它，但是最好用Base64類型來編碼圖像，以減少傳輸?shù)臄?shù)據(jù)量，可以在網(wǎng)上搜索一個圖像到Base64的轉(zhuǎn)換器。

雖然Base64代碼可以直接分配給icon屬性，但我們建議將它放在CSS中，因?yàn)樗拈L度。將以下CSS規(guī)則添加到樣式表中：

CSS

.dx-icon-customicon { // in Angular apps, add ::ng-deep before
background-image: url(data:image/png;base64,... LONG BASE64 CODE IS HERE ...);
background-repeat: no-repeat;
background-position: 0px 0px;
}

customicon這里是圖標(biāo)的名稱，應(yīng)該分配給UI組件的icon屬性。

此外，開發(fā)人員還可以為UI組件元素的不同狀態(tài)提供特定的圖標(biāo)變體，在下面的代碼中，為選定的選項(xiàng)卡提供了一個特殊的圖標(biāo)：

CSS

.dx-tab-selected .dx-icon-customicon {
background-image: url(data:image/png;base64,... LONG BASE64 CODE GOES HERE ...);
background-repeat: no-repeat;
background-position: 0px 0px;
}

從前面的示例中選擇的類(如dx-tab-selected)沒有記錄，檢查CSS規(guī)則，找出哪些類被添加到正在定制的UI組件元素中。

外部圖標(biāo)庫

UI組件中的圖標(biāo)作為<i>元素插入到DOM中，當(dāng)開發(fā)人員設(shè)置一個UI組件的icon屬性時，它的值被用來形成<i>元素的class屬性，例如，下面的代碼…

icon: "home"

... 渲染到DOM，如下所示：

HTML

<i class="dx-icon dx-icon-home"></i>

這允許DevExtreme UI組件支持來自外部圖標(biāo)庫的圖標(biāo)，前提是它們也應(yīng)該在class屬性中指定。

Font Awesome、Glyphicons和Ionicons就是這樣的庫的例子，按照你想要使用的庫的安裝教程，按如下方式設(shè)置圖標(biāo)屬性：

jQuery

JavaScript

$(function() {
$("#homeButton").dxButton({
icon: "fas fa-home" // Font Awesome 5
icon: "fa fa-home" // Font Awesome 4
icon: "glyphicon glyphicon-home" // Glyphicons
icon: "icon ion-md-home" // Ionicons
});
});

ASP.NET MVC Controls

Razor C#

@(Html.DevExtreme().Button()
.Icon("fas fa-home") // Font Awesome 5
.Icon("fa fa-home") // Font Awesome 4
.Icon("glyphicon glyphicon-home") // Glyphicons
.Icon("icon ion-md-home") // Ionicons
)

SVG圖標(biāo)

除了字體圖標(biāo)外，DevExtreme還以SVG格式提供了相同的圖標(biāo)，開發(fā)人員可以再GitHub上的DevExtreme存儲庫中找到SVG圖標(biāo)。

下面的代碼使用了Button UI組件中的SVG圖標(biāo)，同樣的技術(shù)可以用于任何其他具有icon屬性的UI組件。

1. 使用圖標(biāo)的URL：

JavaScript

new DevExpress.ui.dxButton(targetElement, {
icon: "http://path/to/the/icon.svg"
});

2. 插入SVG內(nèi)容inline:

JavaScript

new DevExpress.ui.dxButton(targetElement, {
icon: "<svg>SVG_CONTENT</svg>"
});

3. 導(dǎo)入圖標(biāo)：

JavaScript

import * as myIcon from "./assets/icon.svg";
new DevExpress.ui.dxButton(targetElement, {
icon: myIcon
});

重要提示：SVG格式允許運(yùn)行可能是惡意的可執(zhí)行代碼，我們強(qiáng)烈建議您只使用可信來源的SVG圖標(biāo)。