Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nagelflorian/sketch-icon-font
Grunt based workflow to create an icon-font from a Sketch file
https://github.com/nagelflorian/sketch-icon-font
icon-font sketch workflow
Last synced: 22 days ago
JSON representation
Grunt based workflow to create an icon-font from a Sketch file
- Host: GitHub
- URL: https://github.com/nagelflorian/sketch-icon-font
- Owner: nagelflorian
- Created: 2016-08-07T00:10:43.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2016-08-22T22:42:06.000Z (over 8 years ago)
- Last Synced: 2024-12-13T11:43:44.133Z (26 days ago)
- Topics: icon-font, sketch, workflow
- Language: HTML
- Size: 41 KB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Sketch icon-font
Grunt based workflow to create an icon-font from a Sketch file.
![screen recording](https://cloud.githubusercontent.com/assets/7649376/17498025/031f4dc6-5dc5-11e6-8a7d-5d93476fbdde.gif)
## Installation
Install [SketchTool](http://www.sketchapp.com/tool/) (Sketch command line tool) to be able to export slices from your Sketch file. Then install grunt and some plugins using:
```bash
npm install
```## Create icon-font from sketch file
Design your icons in the Sketch file on the 24x24 grid and create slices (svg) for each icon you want to include in your icon-font. Notice that you should keep at least a 3px padding in order to account for ascents and descents.
```bash
npm run create-font
```## Upload icon font to S3 bucket
You can also optionally upload your icon font to an AWS S3 bucket to integrate it in your web-development workflow. For that you need to create a `aws-keys.json` file in the root of this project like this:
```json
{
"AWSAccessKeyId": "AKxxxxxxxxxx",
"AWSSecretKey": "super-secret-key"
}
```