vaadin - HtmlImport 注解去哪儿了？

Question

我正在尝试包含本文中描述的自定义图标 。但是我再也找不到@HtmlImport注释了（Flow V. 20）。这个注释被广泛使用，如果它被替换，我希望至少能找到一些文档。

PS我也尝试@StyleSheet("./styles/iconexp-iconset-svg.html") 了一下它抱怨：

Couldn't find route for 'styles/iconexp-iconset-svg.html'

Answer 1

在 Vaadin 14 中，不推荐使用 Bower 以支持 npm 和 HTML Imports，而支持 ES 模块。我不记得它们何时被删除，但在 Vaadin 20 中不再支持它们。

您可以在此处查看迁移说明：https ://vaadin.com/docs/v14/guide/upgrading/v10-13/#migration-steps

Answer 2

建立在 Jouni 的基础上，这里是一个使用@JsModule.

(1) 在 JavaScript 文件中定义您的图标集。

import '@polymer/iron-iconset-svg/iron-iconset-svg';

const templateElem = document.createElement('template');

templateElem.innerHTML = `
<iron-iconset-svg name="namespace"><svg><defs>
    <g id="iconname">...</g>
    ...
</defs></svg></iron-iconset-svg>
`;

document.head.appendChild(templateElem.content);

(2) 在你的根布局类中导入文件。

@JsModule("./icons.js")
public class RootLayout...