自定义图标

自定义图标可以通过 SVG sprite 或以独立的图标进行添加，使用方法与内置的图标一样。

图标组

SVG sprite 是 SVG 图片的集合，以单一文件的形式加载到应用程序中，以提供更好的性能。Sprite 可以通过很多第三方工具创建。

按照以下步骤添加图标组：

  1. 将 SVG sprite 放置在 /frontend/icons/ 文件夹内。下面的 my-icons.js 是一个例子，其中包含三个图标：

    my-icons.js
    import '@vaadin/icon/vaadin-iconset.js';

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

template.innerHTML = `<vaadin-iconset name="my-icons" size="24">
  <svg><defs>
    <g id="star"><path d="M12 .587l3.668 7.568 8.332 1.207-6 5.848 1.416 8.263L12 18.896l-7.416 3.895L6 14.162l-6-5.848 8.332-1.207z" fill="#FFD700"/></g>
    <g id="heart"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" fill="#FF69B4"/></g>
    <g id="circle"><circle cx="12" cy="12" r="10" fill="#1E90FF"/></g>
  </defs></svg>
</vaadin-iconset>`;

document.head.appendChild(template.content);

  2. 创建一个枚举，实现 IconFactory：

    MyIcons.java
    package com.company.onboarding.icons;

import com.vaadin.flow.component.dependency.JsModule;
import com.vaadin.flow.component.icon.IconFactory;
import java.util.Locale;

@JsModule("./icons/my-icons.js")
public enum MyIcons implements IconFactory {
    STAR,
    HEART,
    CIRCLE;

    public Icon create() {
        return new Icon(this.name().toLowerCase(Locale.ENGLISH).replace('_', '-').replaceAll("^-", ""));
    }

    public static final class Icon extends com.vaadin.flow.component.icon.Icon {
        Icon(String icon) {
            super("my-icons", icon);
        }
    }
}

之后，就可以像使用默认图标一样使用自定义图标：

<icon icon="my-icons:star"/>
<icon icon="my-icons:heart"/>
<icon icon="my-icons:circle"/>
sprite icons

Java 代码中，可以通过下面的方式使用：

spriteIconButton.setIcon(MyIcons.STAR.create());

单一图标

独立的图标可以添加到应用程序的静态资源文件夹。Spring Boot 默认以下 classpath 为静态资源目录：/static、/public、/resources 或 /META-INF/resources。为了更好地管理图标，也可以创建子目录，例如 META-INF/resources/icons。

XML 中通过 svgIcon 组件使用静态图标资源：

<svgIcon resource="/icons/tree.svg"/>

如果需要为组件设置该类型的图标，可以使用组件的前缀或后缀组件。例如，将图标设置到按钮文字的前面：

<button text="Click!">
    <prefix>
        <svgIcon resource="/icons/tree.svg"/>
    </prefix>
</button>

Java 中的设置方法：

StreamResource iconResource = new StreamResource("tree.svg",
        () -> getClass().getResourceAsStream("/META-INF/resources/icons/tree.svg"));
SvgIcon treeIcon = new SvgIcon(iconResource);
standaloneIconButton.setIcon(treeIcon);