Сборка иконочного шрифта из библиотеки Sketch
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
CHANGELOG.md
Gruntfile.js
README.md
build.sh
iconset.sketch
package.json
template.css
template.json

README.md

Репозиторий для сборки иконочного шрифта из sketch-файла.

Описание, инструкция: http://mikeozornin.ru/blog/all/how-to-build-icon-font-from-sketch-2/

Установить необходимое ПО:

  1. Установить brew (http://brew.sh/index_ru.html): /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

  2. С помощью brew установить шрифтообработчики: brew install ttfautohint fontforge --with-python

  3. С помощью brew установить node.js: brew install node

  4. Установить SketchTool При установленном Sketch выполнить в терминале команду: /Applications/Sketch.app/Contents/Resources/sketchtool/install.sh

  5. Установить grunt npm install -g grunt-cli

Сборка

Выполнить файл build.sh командой: grunt

Если не запускается, то перед этим сделать: chmod +x build.sh

Публикация новой версии шрифта в репозиторий

  1. Настроить локальный npm-репозиторий. Передайте своему фронтендеру файл package.json и попросите его настроить.
  2. Нарисовать иконку
  3. Собрать шрифт: ./build.sh или grunt
  4. Присвоить новым иконкам код символа в секции codepoints в файле Gruntfile.js
  5. Закоммитить sketch-файл, свг-файлы и Gruntfile.js. В комментарии написать изменения: что сделано и зачем
  6. Изменить версию пакета в файлах package.json и Gruntfile.js, дописать изменения в CHANGELOG.md
  7. Закоммитить файлы package.json, CHANGELOG.md и Gruntfile.js
  8. Выполнить команду grunt publish
  9. Передать разработчику шифровку «Выпустил пакет версии xxx»

Все, можно пить кофе.

На что обратить внимание при рисовании иконок

При экспорте иконок надо не забыть перевести все в кривые. Чего не должно быть:

  • Радиусов скруглений
  • Покрашенным рамок
  • Текстовых надписей

Если это будет, то иконка может выглядеть в шрифте плохо, даже если в СВГ-файле было всё ок.