Руководство по экспорту

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

Первый шаг — выбор места сохранения экспортируемых файлов. По умолчанию Bobcorn использует ваш Рабочий стол. Нажмите кнопку папки рядом с путём, чтобы выбрать другое расположение.

Вы можете выбрать, какие группы иконок включить в экспорт. По умолчанию выбраны все группы. Снимите флажок с любых групп, которые не должны попасть в шрифт — например, вы можете исключить группу «черновики» с незаконченными иконками.

Рядом с каждой группой отображается количество иконок. Общее количество иконок внизу списка обновляется в реальном времени при включении и отключении групп, поэтому вы всегда точно знаете, сколько глифов будет содержать экспортируемый шрифт.

Bobcorn может генерировать пять форматов шрифтов. Выбирайте те, которые соответствуют требованиям вашего проекта к поддержке браузеров:

WOFF2 всегда включён, поскольку является незаменимым форматом веб-шрифтов — нет сценария, при котором вы хотели бы экспортировать веб-шрифт без него. Все остальные форматы подключаются опционально в соответствии с вашими конкретными требованиями.

Помимо самих шрифтовых файлов, Bobcorn может генерировать несколько сопутствующих файлов, упрощающих интеграцию и совместную работу:

CSS (icons.css)

Содержит объявление @font-face и CSS-классы .icon-* для каждой иконки в наборе. Поместите этот файл в свой проект, и вы сразу готовы использовать иконки по простым именам классов. Подробности о том, как работает генерируемый CSS, см. в руководстве по CSS @font-face.

JS (icons-symbol.js)

SVG-спрайт с символами, который регистрирует все иконки как встроенные SVG-символы при загрузке скрипта. Используйте его, когда вам нужны многоцветные иконки или функции SVG наряду со шрифтовыми иконками. Паттерны использования см. в руководстве по SVG Symbol.

HTML (demo.html)

Интерактивная страница предварительного просмотра, отображающая все экспортированные иконки с их именами, именами CSS-классов и кодовыми точками Unicode. Откройте в браузере для просмотра полного набора иконок. Полезна дизайнерам для проверки библиотеки иконок и разработчикам для поиска имён классов в процессе интеграции.

ICP (project.icp)

Файл проекта Bobcorn. Экспортируйте его, чтобы поделиться проектом иконок с коллегами или сохранить резервную копию. Открытие файла ICP в Bobcorn восстанавливает полное состояние проекта — все иконки, группы, метаданные и настройки — в точности такими, какими они были при экспорте.

Включите опцию ZIP, чтобы упаковать все экспортируемые файлы в единый архив .zip. Это удобно при передаче шрифта иконок коллегам, загрузке на CDN или прикреплении к документу для передачи дизайна. ZIP содержит ту же структуру каталогов, что и обычный экспорт — без вложенности или реорганизации.

Вот три практических пресета для распространённых типов проектов:

Современный веб-проект

• WOFF2 (всегда включён) + CSS + HTML-демо
• Минимальный вес, охватывает 97%+ браузеров

Проект с полной совместимостью

• WOFF2 + WOFF + CSS + HTML-демо
• Охватывает IE 11+ и все современные браузеры

Дизайн-система / библиотека компонентов

• WOFF2 + TTF + CSS + JS-символы + HTML-демо + ICP
• Шрифты для использования в CSS, TTF для настольных инструментов, JS-символы для многоцветных вариантов, ICP для резервного копирования проекта

При включении всех опций Bobcorn генерирует следующую структуру файлов:

output/
├── MyIcons.woff2        # Шрифтовые файлы
├── MyIcons.woff
├── MyIcons.ttf
├── MyIcons.css          # @font-face + классы иконок
├── MyIcons-symbol.js    # SVG-спрайт с символами
├── demo.html            # Интерактивный предварительный просмотр
└── MyIcons.icp          # Резервная копия проекта

Имя семейства шрифтов (например, «MyIcons») определяется именем вашего проекта в Bobcorn. Все сгенерированные файлы используют это имя в качестве префикса для единообразия.

После того как Bobcorn сгенерировал ваши файлы, выполните следующие шаги для интеграции шрифта иконок в ваш проект:

1. Скопируйте шрифтовые файлы и CSS в каталог ресурсов или шрифтов вашего проекта
2. Подключите CSS в HTML: <link rel="stylesheet" href="MyIcons.css">
3. Используйте иконки в любом месте разметки: <i class="icon icon-home"></i>
4. Опционально предзагрузите файл WOFF2 для более быстрого первоначального рендеринга

Вот полный пример интеграции:

<head>
  <link rel="preload" href="MyIcons.woff2" as="font"
        type="font/woff2" crossorigin>
  <link rel="stylesheet" href="MyIcons.css">
</head>
<body>
  <button><i class="icon icon-save"></i> Сохранить</button>
</body>

Подсказка rel="preload" сообщает браузеру о необходимости начать загрузку шрифтового файла до того, как он встретит правило @font-face в CSS. Это устраняет задержку между разбором CSS и загрузкой шрифта, обеспечивая более быстрый первый рендеринг с видимыми иконками. Атрибут crossorigin обязателен для предзагрузки шрифтов, даже если шрифт обслуживается с того же источника.