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

# Процесс разработки веб иконок

# Работа с .SVG иконками

Не смотря на то, что icons плагин оптимизирует все .svg файлы, для более корректной генерации веб иконок, все файлы следует предварительно подготовить! Советы по подготовке .svg иконок:

  • Каждый файл должен содержать исключительно одну иконку
  • Преобразовать обводку в кривые (избавиться от stroke)
  • Навести порядок в слоях и удалить не нужны элементы

TIP

Важно помнить! Чем более точный и оптимизированный исходный .SVG файл, тем лучше сгенерированный результат!

# Режим генерации иконок

SVG иконки могут быть сгенерированы в веб шрифты или в svg sprite. В режиме разработки, генерация .svg иконок осуществляется относительно активного режима указанного в svgIconsMode (opens new window) параметре конфигурации icons плагина.

TIP

В режиме разработки .svg иконки генерируются относительно "активного режима генерации иконок", переключение данного режима осуществляется путем конфигурирования svgIconsMode параметра в конфигурационном файле проекта. Доступные значения для данного параметра:

  • svgSprite
  • fonts

Моментальное переключение режима генерации SVG иконок в режиме разработки осуществляется посредством svgmode команды в icons меню.

# Использование иконок в SASS фреймворке

# Web fonts иконки

При генерации иконок в виде веб шрифтов, icons плагин генерирует ungic.ficons sass модуль, который может быть использован при написании sass компонентов:

@use "ungic.ficons" as ficons;

.my-star-icon {
    @include ficons.icon(star);
}

# Image sprite

В режиме разработки, все растровые иконки (.png/.jpg формата) из рабочей директории source/icons плагина будут сгруппированы и собраны в единый спрайт. При генерации спрайта, icons плагин генерирует ungic.sprites SASS модуль, который может быть использован при написании sass компонентов:

@use "ungic.sprites" as sprites;

.my-star-icon {
    @include sprites.icon(star_png);
}

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

Для генерации HTML разметки определенной иконки используется icon инструмент, а для получения информации о всех иконках проекта, используется include инструмент

{{{icon "star"}}}

<!-- Передали в шаблон данные из icons плагина -->
{{{include "icons.hbs" icons=true}}}

Подробнее об использовании иконок в html.

# Экспортирование и импортирование иконок

Все svg иконки, могут быть экспортированы из ungic проекта в .JSON файле. Данный экспортируемый файл, может быть использовал для импорта иконок в любой из ungic проектов.

Для экспорта иконок из проекта следует перейти в меню icons плагина и воспользоваться export [path] командой. А для импорта используется команда import [path].

← Использование иконок в JS →