[英]Vaadin Flow - how to add a custom icon set?
我正在使用 vaadin flow v21。 我喜歡創建一個使用自己的 svg 圖標集的自定義組件。 我嘗試基於 vaadin-icon 創建集合,但 svg 定義不會被復制到影子根中。
我做了以下
com.vaadin.flow.component.icon.Icon
派生的CustomIcon
組件類JSModule
,它將包含設置為聚合物模板的新圖標。自定義組件類
@JsModule("./icons/custom-iconset-svg.js")
public class CustomIcon extends Icon {
public CustomIcon(String collection, String icon) {
super(collection,icon);
}
}
文件“自定義圖標集-svg.js”
import '@vaadin/vaadin-icon/vaadin-iconset.js';
import '@vaadin/vaadin-icon/vaadin-icon.js';
const $_documentContainer = document.createElement('template');
$_documentContainer.innerHTML = `<vaadin-iconset-svg name="custom" size="16">
<svg>
<defs>
<vaadin-iconset name="vaadin" size="16">
<svg><defs>
<g id="custom:abacus"><path d="..."></path></g>
</defs>
</svg>
</vaadin-iconset-svg>`;
document.head.appendChild($_documentContainer.content);
使用新的“CustomIcon”類
Icon icon = new CustomIcon("custom","abacus")
add(icon);
這稍后會在以下 html 元素上創建
<head>
部分添加了自定義圖標集<vaadin-iconset-svg name="custom" ... >
<vaadin-icon icon="custom:abacus">
問題是該新元素的 shadowroot 的<svg>
部分是空的。 所以不確定我在這里錯過了什么?
<vaadin-icon style="width: var(--lumo-icon-size-s); height: var(--lumo-icon-size-s); margin-right: var(--lumo-space-s);" icon="custom:abacus">
#shadow-root
<style>...</<style>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">
<!---->
</svg>
</vaadin-icon>
這是一個有效的示例,在 Vaadin 21.0.3 中進行了測試
文件 frontend/icons/custom-iconset.js
import '@vaadin/vaadin-icon/vaadin-iconset.js';
import '@vaadin/vaadin-icon/vaadin-icon.js';
const $_documentContainer = document.createElement('template');
$_documentContainer.innerHTML = `<vaadin-iconset name="custom" size="24">
<svg><defs>
<g id="custom:sample1"><path d="M19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3ZM9 17H7V10H9V17ZM13 17H11V7H13V17ZM17 17H15V13H17V17Z"/></g>
<g id="custom:sample2"><path d="M7 17L8.4 15.6L5.8 13L16 13L16 11L5.8 11L8.4 8.4L7 7L2 12L7 17Z" /><path d="M19 19H11V21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3H11V5H19V19Z" /></g>
</defs></svg>
</vaadin-iconset>`;
document.head.appendChild($_documentContainer.content);
方便枚舉:
public enum CustomIcon implements IconFactory {
SAMPLE1, SAMPLE2;
@Override
public Icon create() {
return new Icon("custom", name().toLowerCase(Locale.ENGLISH));
}
}
示例用法:
@Route("")
@JsModule("icons/custom-iconset.js")
public class ShowIconsView extends Div {
public ShowIconsView() {
for (CustomIcon customIcon : CustomIcon.values()) {
add(customIcon.create());
}
}
}
您可能可以將 @JsModule 添加到公共父布局中。 Github上的完整示例。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.