Пользовательские иконки
Дополнительные иконки можно добавить в виде SVG-спрайта или отдельных иконок и использовать вместе со встроенными наборами.
Набор иконок
SVG-спрайт — это коллекция SVG-изображений, загружаемых в приложение как единый файл, что обеспечивает лучшую производительности. Вы можете создать спрайт вручную или с помощью сторонних инструментов.
Чтобы добавить набор иконок, выполните следующие шаги:
-
Создайте JavaScript-файл для вашего набора иконок в директории
/frontend/icons/
. Используйте следующий код как пример создания набора, содержащего три иконки:my-icons.jsimport '@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);
-
Создайте Java enum, реализующий
IconFactory
и добавьте ему аннотацию@JsModule
со ссылкой на JavaScript-файл:MyIcons.javapackage 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"/>

Или установить их для компонента в Java-коде:
spriteIconButton.setIcon(MyIcons.STAR.create());
Отдельная иконка
Отдельные иконки можно добавить в директорию статического контента. По умолчанию Spring Boot обслуживает статические ресурсы из следующих путей в classpath: /static
, /public
, /resources
или /META-INF/resources
. Для удобства организации иконок можно создать подкаталог META-INF/resources/icons
.
Чтобы использовать статический ресурс, воспользуйтесь компонентом svgIcon
:
<svgIcon resource="/icons/tree.svg"/>
Чтобы установить иконку для компонента, используйте его префиксные или суффиксные элементы. Например, чтобы разместить иконку перед текстом кнопки:
<button text="Click!">
<prefix>
<svgIcon resource="/icons/tree.svg"/>
</prefix>
</button>
Или воспользуйтесь программным подходом:
StreamResource iconResource = new StreamResource("tree.svg",
() -> getClass().getResourceAsStream("/META-INF/resources/icons/tree.svg"));
SvgIcon treeIcon = new SvgIcon(iconResource);
standaloneIconButton.setIcon(treeIcon);