[ELMA4] Иконки

Как задать размер иконки

Иконки можно задавать в трех размерах.

// Variables.less
@icon-size--large: 32px;
@icon-size--medium: 24px;
@icon-size--small: 16px;

Задавать размер иконки нужно через миксин .icon-size.

// bad, Однако допустимо в css-файлах
width: 24px;
height: 24px;
background-size: 24px;

//good
.icon-size(@icon-size--medium);
background-size: @icon-size--medium;

Как задать наименование иконок

1. Использовать нижний регистр.

2. Разделять слова "_" подчеркиванием.

3. Запрещается использовать цифры.

4. Перед добавлением новой иконки просмотреть в /ContentArea/IconPack/Collection, чтобы избежать повторов.

// bad
Add_1.svg
// bad
add-task.svg
// bad
AddTask.svg

// good
add.svg
// good
add_task.svg

Как заменить существующую иконку .png, .gif на .svg

1. Найти нужную .svg иконку по пути SDK\EleWise.ELMA.SDK.Web\Mvc\Templates\Content\IconPack.
Также можно просмотреть все иконки в вебе по ссылке http://localhost/ContentArea/IconPack/Collection.

2. Если нужной иконки не нашлось – добавить новую .svg иконку в SDK\EleWise.ELMA.SDK.Web\Mvc\Templates\Content\IconPack.
Также учесть цвет иконки:

<svg color="#888" ...> // указать color="#888"
  <path fill="black" /> -> <path fill="currentColor" /> // заменить все цвета на currentColor
</svg>

3. Заменить .png, .gif иконки на .svg следующими способами.

В less файле:

открыть variables.less, найти нужную иконку;
если нет нужной иконки в variables.less, то следует добавить;
заменить нужную иконку:

// было
background: url(/Content/Images/arrow_up.png);
// стало
background: @icon--arrow-up;

В css/js файлах:

// было
/Content/Images/arrow_up.png
// стало
/Content/IconPack/arrow_up.svg

С#/cshtml:

// было
"#x16/edit_page.png"
// стало
"#edit.svg"
// или
UIIcons.Edit

// было
RouteProvider.ImagesFolder + "x32/nomen_add.png"
// стало
"#add.svg"
// или
UIIcons.Add

Методы для работы с иконкам

C#

Html.Image – создает изображение, обернутое в <img />. Параметры:

imageUrl – ссылка на иконку;
htmlAttributes – атрибуты иконки.

Пример:

@Html.Image("#edit.svg", "", new { @class="vertical-middle" })

Html.SvgImage – создает разметку .svg иконки. Параметры:

imageUrl – ссылка на иконку;
htmlAttributes – атрибуты иконки.

Пример:

@Html.SvgImage("#circle-fill.svg", new { id = "Status") })

Html.MetadataMarkupImage – создает разметку иконки метаданных объекта. Параметры:

uid – uid объекта, иконку которого требуется получить;
htmlAttributes – атрибуты иконки.

Пример:

@Html.MetadataMarkupImage(Model.ObjectUid, new { @class = "FeedObjectIcon" })

Html.MetadataMarkupEnumImage – создает разметку иконки метаданных перечисления. Параметры:

uid – uid объекта, иконку которого требуется получить;
htmlAttributes – атрибуты иконки.

Пример:

@Html.MetadataMarkupEnumImage(Model, new { title=alt, @class = statusColorClass + " svg-16-size" })

JS

elma.Image – создает разметку иконки эквивалентно Html.SvgImage.

Пример:

elma.Image("#add.svg", {
  "class" : "my-icon-class",
  // icon-attributes
})

Как задать цвет иконке

Цвет иконки задается с помощью классов цветов.

// Создание красной иконки
Html.SvgImage("#add.svg", new { @class="color-red"})

// Создание чёрной иконки
elma.Image("#add.svg", {
    "class" : "color-black"
})

Основные изменения в работе с иконками в ELMA4 по сравнению с ELMA3

Добавлен метод для работы с .svg Html.SvgImage.
Добавлены методы для работы с метаданными объектов Html.MetadataMarkupImage и Html.MetadataMarkupEnumImage.