Добавление иконок

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

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

Иконочный шрифт — это набор иконок, поставляемый как шрифт. Иконки отображаются как символы этого шрифта.

Иконочный шрифт можно использовать для замены стандартных иконок приложения. Подробности см. Замена стандартных иконок.

Для добавления иконочного шрифта потребуются:

  • Файл шрифта – обычно .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.

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.Icon;
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("my-icons",
                name().toLowerCase(Locale.ENGLISH).replace('_', '-'));
    }
}

Теперь пользовательские иконки можно использовать так же, как стандартные:

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