SapUI5: Пользовательские иконки / custom icons

Опубликовано автором

sapui5 icons final
В SapUI5 есть довольно неплохой и исчерпывающий набор стандартных иконок.
Но бывают такие ситуации, когда в проекте необходимо использовать иконки, которые не нашлись в стандартном наборе.
Разберемся как это сделать!

Пример, который мы будем рассматривать ниже, можно импортировать в свой WebIDE отсюда https://github.com/kannade/sapui5_icon.

Найдем и скачаем иконки

Для примера мы воспользуемся сервисом flaticon, как источником иконок.

Найдем необходимые нам иконки и добавим их в свой набор:
sapui5 icons

Скачаем сгенерированный набор выбранных иконок:
sapui5 icons

Архив иконок выглядит следующим образом:
sapui5 icons

Из всех файлов нам понадобиться только папка font
sapui5 icons

Загрузим иконки в проект

Загрузим файлы: Flaticon.woff2, Flaticon.woff, Flaticon.ttf, Flaticon.eot, Flaticon.svg в папку css нашего проекта:

sapui5 upload icons

Если встроенный редактор будет пытаться открыть загруженный файл на редактирование, то закрывайте вкладку с файлом без сохранения!

sapui5 upload icons

Отлично! Иконки загружены!

sapui5 upload css icons

Опишем иконки

Откроем файл style.css нашего проекта и перенесем туда часть стилей из файла flaticon.css из скаченного архива:

/sapui5_icon/blob/master/webapp/css/style.css
@font-face {
  font-family: "Nickcode";
  src: url("./Flaticon.eot");
  src: url("./Flaticon.eot?#iefix") format("embedded-opentype"),
       url("./Flaticon.woff2") format("woff2"),
       url("./Flaticon.woff") format("woff"),
       url("./Flaticon.ttf") format("truetype"),
       url("./Flaticon.svg#Flaticon") format("svg");
  font-weight: normal;
  font-style: normal;
}
 
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: "Nickcode";
    src: url("./Flaticon.svg#Flaticon") format("svg");
  }
}
 
.iconNickClass {
	font-size: 3rem;
}

Затем перейдем в Component.js и добавим иконки в IconPool:

/sapui5_icon/blob/master/webapp/Component.js
sap.ui.define([
	"sap/ui/core/UIComponent",
	"sap/ui/Device",
	"nickcode_ru_customIcon/model/models",
	"sap/ui/core/IconPool"], function (UIComponent, Device, models, IconPool) {	"use strict";
 
	return UIComponent.extend("nickcode_ru_customIcon.Component", {
 
		metadata: {
			manifest: "json"
		},
 
		init: function () {
			UIComponent.prototype.init.apply(this, arguments);
			this.getRouter().initialize();
			this.setModel(models.createDeviceModel(), "device");
 
			IconPool.addIcon("smart", "nickicon", {				fontFamily: "Nickcode",				content: "f100"			});			IconPool.addIcon("photo", "nickicon", {				fontFamily: "Nickcode",				content: "f101"			});			IconPool.addIcon("smart1", "nickicon", {				fontFamily: "Nickcode",				content: "f102"			});			IconPool.addIcon("watch", "nickicon", {				fontFamily: "Nickcode",				content: "f103"			}); 
		}
	});
});

где smart, photo, smart1, watch — названия наших иконок (можно придумать свои);
nickicon — название нашего набора иконок (можно придумать свое);
fontFamily: «Nickcode» — название шрифта, который мы определили в css.
content: «fXXX» — «код» иконки, который можно посмотреть в скачаных Flaticon.svg или в Flaticon.css.

«Нарисуем» иконки

Добавим иконки в наше представление (view):

/sapui5_icon/blob/master/webapp/view/main.view.xml
<mvc:view controllername="nickcode_ru_customIcon.controller.main" xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" displayblock="true" xmlns="sap.m">
 <shell id="shell">
  <app id="app">
   <pages>
    <page id="page" title="{i18n>title}">
     <content>
 
      <core:icon src="sap-icon://nickicon/smart" class="iconNickClass" color="#031E48">      </core:icon>      <core:icon src="sap-icon://nickicon/photo" class="iconNickClass sapUiMediumMarginBegin" color="#FF1965">      </core:icon>      <core:icon src="sap-icon://nickicon/smart1" class="iconNickClass sapUiMediumMarginBegin" color="#0094FF">      </core:icon>      <core:icon src="sap-icon://nickicon/watch" class="iconNickClass sapUiMediumMarginBegin" color="#32A800">      </core:icon> 
     </content>
    </page>
   </pages>
  </app>
 </shell>
</mvc:view>

Радуемся результату 🙂
sapui5 icons final