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

下面是添加一些 IcoMoon 图标到一个瓦丁流应用程序;

1. 使用中的注释 https://icomoon.io/docs.html 在“Generating Icons in SVG&More”部分下,我生成了iron iconset SVG格式的聚合物兼容图标集。

   • 访问 https://icomoon.io/app/ 并选择图标(您可以添加来自不同库的图标),
   • 单击“生成SVG和更多”,

2. 解压缩zip文件,然后打开polymer文件夹。它包含*-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=...

也可以手动创建图标集合。 我曾经 https://github.com/vaadin/vaadin-icons/blob/master/iconset.html 作为模板(或多或少):

2. 创建新的SVG文件我的图标.svg首先是

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

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

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

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

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

7. 从原始SVG文件中复制path元素(并删除任何“g”或“symbol”或“title”或任何其他不是path/line/shape的元素),然后将其粘贴到新创建的“g”元素中。

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

9. 在Java代码中阅读我的图标.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);

更新:从vaadin14开始(除了在兼容模式下),您应该改用@JsModule。i、 e.@JsModule(“@聚合物/铁图标/铁-图标.js")