Добавление собственных иконок

Собственные иконки можно добавить как отдельные SVG-файлы, SVG-спрайты или иконочные шрифты.

Выбор формата

Формат Подходит для Характеристики

Отдельные SVG-файлы

Небольшое количество собственных иконок

Каждая иконка хранится в отдельном файле. Браузер загружает только те иконки, которые используются в UI.

SVG-спрайт

Набор собственных иконок

Несколько иконок хранятся как символы в одном файле и выбираются по идентификаторам.

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

Готовая библиотека иконок на основе шрифта

Требует файлов шрифта и настройки CSS. Иконки выбираются с помощью CSS-классов, лигатур или кодов символов.

О размещении иконок с помощью атрибутов, вложенных элементов или Java см. Использование иконок.

Отдельные SVG-файлы

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

Чтобы отобразить SVG-файл, используйте компонент svgIcon:

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

SVG-иконку также можно создать программно:

SvgIcon treeIcon = new SvgIcon();
treeIcon.setSrc(DownloadHandler.forClassResource(
        getClass(),
        "/META-INF/resources/icons/tree.svg",
        "tree.svg"
));
standaloneIconButton.setIcon(treeIcon);

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-перечисление, реализующее 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

Или создайте иконку программно:

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

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

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

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

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

  • Один или несколько файлов шрифта — обычно .woff2 и при необходимости резервные форматы .woff, .ttf или .otf.

  • Глобальное объявление @font-face — обычно оно находится в файле стилей, который импортируется в основной файл стилей темы (styles.css).

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

Добавление шрифта Material Icons

В этом примере показано, как добавить шрифт Material Icons в тему приложения.

Использование локальных файлов шрифта

Чтобы использовать Material Icons без внешнего сервиса, создайте подкаталог material в каталоге активной темы приложения.

Добавьте следующие файлы:

  • material-icons.woff2

  • material-icons.woff

  • material-icons.ttf

  • material-icons.css — содержит объявление @font-face и CSS-класс иконок:

    material-icons.css
    @font-face {
  font-family: "Material Icons";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src:
    url("./material-icons.woff2") format("woff2"),
    url("./material-icons.woff") format("woff"),
    url("./material-icons.ttf") format("truetype");
}
.material-icons {
  font-family: "Material Icons";
  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";
}

Браузер использует первый поддерживаемый формат шрифта. Поэтому каждый файл шрифта, объявленный в src, должен быть загружен и расположен рядом с material-icons.css.

Импортируйте файл в основной файл стилей темы:

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

Использование Google Fonts

Material Icons можно загружать из Google Fonts, не сохраняя файлы шрифта в приложении. Для этого браузерам пользователей нужен сетевой доступ к Google Fonts.

Удалите импорт material/material-icons.css из файла styles.css темы и добавьте вместо него следующий импорт:

styles.css
@import url("https://fonts.googleapis.com/css2?family=Material+Icons&display=swap");

Импортированный файл стилей Google Fonts содержит объявление @font-face и CSS-класс Material Icons, поэтому локальные файлы шрифта и дополнительное объявление @font-face не требуются.

Использование иконок шрифта

После настройки шрифта любым из способов создайте иконку с помощью компонента fontIcon.

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

  • Лигатура, например calendar, заданная атрибутом ligature. Для этого шрифт должен поддерживать лигатуры.

  • Шестнадцатеричный код символа, например f199, заданный атрибутом charCode.

    В следующем примере показаны оба способа:

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