Skip to content

mikeozornin/sketch-to-icons

Repository files navigation

Репозиторий для сборки иконочного шрифта из 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»

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

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

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

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

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

About

Сборка иконочного шрифта из библиотеки Sketch

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published