Создание иконпака

Использование иконок на сайте стало обыденным делом.

В большинстве случаев используются такие иконпаки как «Font Awesome», «IcoMoon» и прочие. Хотя далеко не всегда используется хотя бы половина доступных иконок, либо каких-то наоборот не хватает.

Iconfont

Для генерации собственного иконпака можно использовать gulp. Готовый набор доступен на github.

Принцип работы

Скрипт преобразует все svg иконки в один файл шрифта формата woff. Генерируются CSS стили для иконок формата: {ICONPACK_PREFIX}-{SVGICON_NAME}.

• ICONPACK_PREFIX — префикс, который указывается при запуске сборщика в консоле;
• SVGICON_NAME — название файла.

Создается CSS файл с закодированным в base64 шрифтом. Сгенерированные CSS файлы объединяются в один файл.

Установка

$ git clone https://github.com/imitronov/iconfont.git
$ cd iconfont
$ yarn # или npm i

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

В папке icons создаете свою папку и копируете в нее svg иконки.

$ gulp --prefix "ICONPACK_PREFIX" --pack "ICONPACK_FOLDER"

• ICONPACK_PREFIX — это префикс для иконок в генерируемом CSS
• ICONPACK_FOLDER — это папка с иконками в icons

На главную