如何在Vaadin流中包括自己的图标集？

Question

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

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

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

Answer 1

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

1. 使用https://icomoon.io/docs.html中“在SVG中生成图标及更多内容”部分下的注释，生成了Iron-iconset-svg格式的Polymer兼容图标集。

   • 访问https://icomoon.io/app/并选择图标（您可以添加来自其他库的图标）
   • 点击“生成SVG及更多信息”，
   • 单击“首选项”，然后选择“聚合物”作为目标格式并下载，

2. 解压缩zip文件，然后打开聚合物文件夹。它包含* -svg.html文件，该文件是@Jouni在上述说明中讨论的'iron-iconset-svg'格式文件。这个html文件实际上是内联SVG的集合。

3. 将html文件复制到资源文件夹中；

   e.g. resources/META-INF/resources/frontend/styles/

4. 并使用@HtmlImport导入；

   e.g. @HtmlImport("frontend://styles/icomoon-iconset-svg.html")

5. 然后您可以使用集合名称和图标名称创建图标；

   Icon icon = new Icon("icomoon", "mobile");

   • 集合名称是html文件中<iron-iconset-svg name=...中的名称值。

Answer 2

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

1. 绘制或下载一些SVG文件。

2. 创建一个以

   开头的新SVG文件myicons.svg。

   <iron-iconset-svg name="myiconset"><svg><defs>

3. ...以

   结尾

   </defs></svg></iron-iconset-svg>

4. 在defs-tag中，为每个图形插入一个“ g”元素，例如：

   <g id="myicon" viewBox="0 0 52 56"></g>

5. 设置此文件中唯一的ID。

6. 使用原始SVG文件中的值设置viewBox属性（可见尺寸）。

7. 从原始SVG文件复制路径元素（并删除任何“ g”或“ symbol”或“ title”或其他没有路径/线条/形状的元素）并粘贴/将它们添加到您新创建的“ g”元素中。

   <path d="m14 15h-13c-.55228475 [...]" />

8. 将此创建的myicons.svg文件放置在所需的位置。

9. 在您的Java代码中读取该myicons.svg文件并将其粘贴到您的网站中，例如以这种直接方式（如果选择其他路径，则替换路径）：

   add(new Html(Files.readString(new File("src/main/webapp/img/myicons.svg").toPath())));

10. 创建图标：

    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")