Vaadin Flow - 如何添加自定义图标集？答案

【问题标题】：Vaadin Flow - how to add a custom icon set?Vaadin Flow - 如何添加自定义图标集？
【发布时间】：2021-12-04 12:14:23
【问题描述】：

我正在使用 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);
    }
}

文件“custom-iconset-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>

【问题讨论】：

即使内置图标使用id="vaadin:abacus"，我还是会尝试创建一个没有附加前缀的自定义图标集，如id="abacus"。至少 Lumo 图标集是这样定义的：github.com/vaadin/web-components/blob/master/packages/…

标签： javascript java svg polymer vaadin-flow

【解决方案1】：

这是一个在 Vaadin 21.0.3 中测试的有效示例

文件前端/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 上的完整示例。

【讨论】：

在这种情况下，将@JsModule 注释添加到公共父布局可能更有意义。就像现在的代码一样，它可以被读作“自定义图标集 blongs to this view”。