如何在 Vaadin 流程中包含自己的图标集合？

Question

如何在 Vaadin Flow 中包含自己的图标？您是否制作了一个 HTML 文件，例如来自 Vaadin Icons 的 this 文件并通过

包含它

@HtmlImport("frontend://path/to/your/icons.html")

到目前为止我没有找到任何文档。所以我想这是一种可能性？

Answer 1

这是一个向 Vaadin Flow 应用程序添加一些 IcoMoon 图标的示例；

使用 'Generating Icons in SVG & More' 部分下 https://icomoon.io/docs.html 中的注释，我生成了 iron-iconset-svg 格式的 Polymer 兼容图标集。
- 访问 https://icomoon.io/app/ 和 select 图标（您可以添加来自不同库的图标），
- 点击'Generate SVG & More',
- 点击 'Preferences' 和 select Polymer 作为目标格式并下载，
解压缩 zip 文件，然后打开 polymer 文件夹。它包含 *-svg.html 文件，这是 @Jouni 在上面的注释中提到的 'iron-iconset-svg' 格式文件。这个 html 文件实际上是一个 collection 内联 SVG。
将 html 文件复制到您的资源文件夹；

e.g. resources/META-INF/resources/frontend/styles/
并使用 @HtmlImport;
导入
e.g. @HtmlImport("frontend://styles/icomoon-iconset-svg.html")
然后可以使用collection名称和图标名称创建图标；

Icon icon = new Icon("icomoon", "mobile");
- collection名称是html文件中<iron-iconset-svg name=...中的名称值。

Answer 2

您也可以手动创建图标集。我使用 https://github.com/vaadin/vaadin-icons/blob/master/iconset.html 作为模板（或多或少）：

绘制或下载一些 SVG 文件。
创建一个以
开头的新 SVG 文件 myicons.svg
<iron-iconset-svg name="myiconset"><svg><defs>
...并以
结尾
</defs></svg></iron-iconset-svg>
在 defs-tag 中，为每个图形插入一个 "g" 元素，例如：

<g id="myicon" viewBox="0 0 52 56"></g>
在此文件中设置唯一的 ID。
使用原始 SVG 文件中的值设置 viewBox 属性（可见尺寸）。
从原始 SVG 文件复制路径元素（并删除任何 "g" 或 "symbol" 或 "title" 或任何其他不存在的元素path/line/shape) 并将 it/them 粘贴到新创建的 "g" 元素中。

<path d="m14 15h-13c-.55228475 [...]" />
将这个创建的 myicons.svg 文件放在任何你想要的地方。
在您的 Java 代码中读取 myicons.svg 文件并将其粘贴到您的站点中，例如以这种直接的方式（如果您选择另一个路径，请替换路径）：

add(new Html(Files.readString(new File("src/main/webapp/img/myicons.svg").toPath())));
创建图标：

com.vaadin.flow.component.icon.Icon myIcon = new Icon("myiconset", "myicon"); myIcon.getStyle().set("color", "var(--lumo-primary-text-color)"); add(myIcon);

Answer 3

更新：从 Vaadin 14（兼容模式除外）开始，您应该改为使用 @JsModule。即@JsModule("@polymer/iron-icon/iron-icon.js")

How to include own icon collection in Vaadin flow?