Ungic packer - среда разработки веб верстальщика

# Интеграция с Icons plugin

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

Для облегчения использования сгенерированных иконок при создании html разметки используется icon инструмент:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>
        Send
        {{{icon "arrow_left"}}}
    </button>
</body>
</html>

Преимущества использования данного инструмента:

  • Автоматическая HTML разметка иконок в зависимости от режима генерации иконок
    • генерация иконок шрифтов
    • генерация svg sprite иконок
    • генерация image sprite иконок
  • Создание связи между HTML страницей и используемыми иконками

Данный инструмент принимает первым параметром ID веб иконки, кроме того, можно передать аргументы для следующих параметров:

  • presentation - Boolean - если true иконка будет скрыта от screen reader (часть доступности)
  • title - По умолчанию: имя файла иконки - имя иконки (часть доступности)
  • class - дополнительный класс для иконки
  • href - при наличии данного параметра, иконка будет возвращена в виде ссылки
{{{icon "arrow_left" href="/"}}}

{{{icon "arrow_left" title="Продолжить"}}}

TIP

ID иконки можно получить на demo-icons странице кликнув по иконке, данная страница генерируется автоматически при условии наличия иконок в проекте.

TIP

Используя icon инструмент, можно не беспокоиться об активном режиме генерации иконок icons плагином. Данный инструмент автоматически генерирует разметку относительно активного режима и типа иконки! При изменении режима генерации иконок, автоматически меняется и разметка уже включенных иконок в html шаблонах и страницах.

# Получение данных о всех иконках

Для того, чтобы получить данные о всех существующих иконках проекта, следует воспользоваться icons параметром include инструмента:

{{{include "templates/icons.hbs" icons=true}}}


// templates/icons.hbs
{{{debug "icons"}}}

← Создание релиза →