Пользовательские иконки

Дополнительные значки можно добавить тремя способами: как SVG-спрайт, как отдельные SVG-файлы или как иконочный шрифт. Их можно использовать вместе со встроенными наборами иконок.

Набор иконок

SVG-спрайт — это коллекция SVG-изображений, загружаемых в приложение как единый файл, что обеспечивает лучшую производительности. Вы можете создать спрайт вручную или с помощью сторонних инструментов.

Чтобы добавить набор иконок, выполните следующие шаги:

  1. Создайте JavaScript-файл для вашего набора иконок в директории /frontend/icons/. Используйте следующий код как пример создания набора, содержащего три иконки:

    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. Создайте Java enum, реализующий IconFactory и добавьте ему аннотацию @JsModule со ссылкой на JavaScript-файл:

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

Отдельная SVG иконка

Отдельные иконки можно добавить в директорию статического контента. По умолчанию Spring Boot использует статические ресурсы из следующих путей в classpath: /static, /public, /resources или /META-INF/resources. Для удобства организации иконок можно создать подкаталог META-INF/resources/icons.

Чтобы добавить такую иконку, воспользуйтесь компонентом svgIcon:

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

Чтобы установить иконку в компонент, используйте его вложенный элемент icon:

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

Если компонент поддерживает префикс или суффикс, разместите значок там, чтобы разместить его относительно содержимого. Например, чтобы поместить значок перед текстом кнопки:

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

Иконочные шрифты

Иконочный шрифт предоставляет набор значков в виде шрифта. Вы можете использовать компонент fontIcon для отображения значков из шрифта, указав семейство шрифтов и либо код символа, либо лигатуру значка.

Чтобы добавить собственный иконочный шрифт, потребуется следующее:

  • Файл шрифта – в современных браузерах используются .woff или .woff2; .ttf или .eot можно предоставить для старых браузеров.

  • Определение @font-face – как правило, содержится в файле стилей, который вы импортируете в главный файл стилей вашей темы (styles.css).

  • Опционально, файл стилей с CSS-классами для иконок — обычно добавляется вместе с определением @font-face и также импортируется в styles.css.

Пример: Добавление Material иконок

Рассмотрим добавление Material иконок в тему приложения.

material icons

Папка темы включает новую директорию, содержащую два файла:

  • material-icons-outlined.woff2

  • outlined.css – в котором содержится опредление @font-face и CSS-класс для иконок:

    outlined.css
    @font-face {
  font-family: "Material Icons Outlined";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("./material-icons-outlined.woff2") format("woff2");
}
.material-icons-outlined {
  font-family: "Material Icons Outlined";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "liga";
}

В главный файл стилей темы необходимо добавить следующую строку:

styles.css
@import url('material/outlined.css');

Чтобы создать иконку, используйте компонент fontIcon, указав название семейства шрифтов (fontFamily) (совпадающее с названием определенным в @font-face) и либо код символа, либо лигатуру:

<fontIcon fontFamily="Material Icons Outlined" charCode="e8b6"/>
<fontIcon fontFamily="Material Icons Outlined" ligature="search"/>

Компонент fontIcon можно вложить в элементы prefix, suffix, или icon.

Стандартные наборы иконок (например, Lumo icons) используют тот же механизм и могут быть использованы с помощью компонента fontIcon через код символа или лигатуру.

<fontIcon fontFamily="lumo-icons" charCode="ea17"/>