8

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

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

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

4

3 回答 3

6

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

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

    • 访问https://icomoon.io/app/并选择图标（您可以添加来自不同库的图标），
    • 点击“生成 SVG 及更多”，
    • 单击“首选项”并选择 Polymer 作为目标格式并下载，

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

    • 集合名称是<iron-iconset-svg name=...html 文件中的名称值。
于 2018-12-25T21:03:18.377 回答
2

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

于 2021-02-23T13:08:26.757 回答
1

您也可以手动创建图标集合。我使用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”或“符号”或“标题”或任何其他没有路径/线条/形状的元素）并将其粘贴到新创建的“ 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);

于 2020-04-04T20:38:54.467 回答