cognitom / symbols-for-sketch Goto Github PK

View Code? Open in Web Editor NEW

680.0 680.0 76.0 5.39 MB

Symbol font templates for Sketch.app

JavaScript 42.81% CSS 26.26% HTML 30.93%

symbols-for-sketch's Introduction

Symbols for Sketch

This repo contains a set of templates to make a symbol font (icon font) with Sketch. What to do is ...

Setup Tools
Draw Icons
Gulp!

Just 3 steps! Enjoy making your original fonts ;-)

Requirements

Setup Tools

Node.js and gulp.js

You need some command line environments. But don't worry. Almost all will be done through GUI.

Go to http://nodejs.org/ and click the INSTALL link.

Open the file downloaded and install it into your mac.

Download this repo

Download this repo from GitHub. Extract it into the folder you like. e.g. /Users/yourname/Documents/your_icons

Open Terminal.app. You may find it at /Applications/Utilities/Terminal.app as you know.

Go to the folder in Terminal.app:

$ cd /Users/yourname/Documents/your_icons

Install some tools into the folder:

$ npm install

Sketch and Sketch Tools

You haven't got Sketch yet? Visit their site. It's worth more than its price tag. Sketch bundles CLI tool, too. You can use sketchtool command to extract the data from .sketch files.

Note: from ver 3.5, sketchtool has become an out-of-box feature. You don't have to install it seperately.

Draw Icons

It's time to draw your icons!

symbol-font-14px.sketch (default)
symbol-font-16px.sketch

There're two templates. Difference between these are just grid size. The template contains 32 artboards to draw each icon. Of cause you can add more artboards if you need.

Name convention

The name of the artboard is important. It define the name of not only the glyph but also the class of CSS.

icon_name: The character code will be assign automatically
uF701-icon_name: You can assign the code manually

Gulp!

After saving your Sketch file, go back to Terminal.app again.

$ npm run symbols

Then check the dist directory. There'll be the font and CSS files generated.

Config

You can change the detail as you like. See the gulpfile.js and modify it.

To change the name or style of your font, it would be enough just changing the part below:

/**
 * Font settings
 */
 const fontName = 'symbols' // set name of your symbol font
 const className = 's' // set class name in your CSS
 const template = 'fontawesome-style' // or 'foundation-style'
 const skethcFileName = 'symbol-font-14px.sketch' // or 'symbol-font-16px.sketch'

Live reloading

Try the command below in Terminal.app. This time you will get the browser open automatically.

$ npm start

Then, keep the browser open and change your icon on symbol-font-*.sketch and save it. Boom! Magic will happen. The output inside the browser will be also changed. It's really really convenient. You must try it out.

CSS Styles

You can choose CSS Style templates, and make your own with lodash template.

(1) like Font Awesome

respect to: Font Awesome
template: css/fontawesome-style.css

<span class="s s-your_icon"></span>

(2) like Foundation

respect to: Foundation Icon Font 3
template: css/foundation-style.css

<span class="s-your_icon"></span>

Variants

for Android Apps

See variants/android directory.

Behind the scenes

We use gulp and some plugins.

gulp-sketch: to export SVG files from .sketch files
gulp-iconfont: to convert them into font files

To live-reload, we're using browser-sync.

Trouble Shooting

Case 1: Icons with circle 'filled' with black

Conditions like below.

Icons which has an inner symbol with a circle or a box outside
It seems OK with Chrome/Safari on Mac
Not OK with Safari on iOS, Chrome on Android
Not OK with IE on Windows

Solution: Revers Order of paths. See the screenshot below. Then Save and recreate the font.

Case 2: Can't export CSS/HTML

gulp-iconfont has changed their API from v2 (June 2015), so we got to change our recipe a little bit.

Event name: codepoints to glyphs
Arguments passed: codepoint is equivalent to glyph.unicode[0].charCodeAt(0)

See more detail.

Case 3: Transformed items appear outside the artboard

Conditions:

rotated and/or transformed elements appear at wrong coordinates after export

Solution: Pipe gulp-imagemin before the iconfont task, which basically makes use of the SVG Optimizer and collapses multiple transformations.

History

2.1.0:
- Added: live reloading (finally found the solution in browser-sync)
- Added: npm scripts. Now no need to install gulp globally
- Changed: compatible with standard.js
2.0.0: ES6, WOFF2, and adding variations (for Android app by @weitsai)
1.2.0: Catch up versions, simplify the instruction
1.1.0: Catch up to gulp-iconfont v2(svgicons2svgfont)

symbols-for-sketch's People

Contributors

Stargazers

Watchers

Forkers

mansfiem baaton 50river poindexterc sethkontny tylergaw nullnotfound bitjson andrew-filonenko norfild kentucky-roberts yozzh allenzha nagyist edacchi-chonmage perrycarbonell andrehol imagesuren geta6 teohhanhui bstevens itamark ohm89 hollyos weitsai liaohuqiu yashilanka lcnbala moodoo-sh emmenko yural-webcodium tyleryang regina-book captainhurst kerasking alphamobile maogongzi thierryc chrisjenglish sailxjx bb-components jamessimo hamedasemi vanthome mtf2000 galaxija737 andrewmartin renatosakamoto alexswensen davenosaur d-mikita cofit avanherk kingyond miukimiu weltraumakustik nju33 edsonlyra hellogithub2014 thomas-keck nivic nishant8bits nazar482 jerrylyu93 ykankaya jasonhill23 r3sult natakurus tiunov80 andy770921 sydboys

symbols-for-sketch's Issues

Please remove the "sudo" from your Readme instructions

Please remove the "sudo" as part of your instructions for installing gulp. Installing global modules globally via sudo is generally very ill-advised

SCSS template instead of css template

Hi, I'm trying to generate a scss file for my icons instead of the standard css. It's because then I run other process over that file, and I need to use that format. Is it possible to use a scss template? How can I generate a scss output file?
My process generate the fonts files, and if I use a css template it runs ok, but not with scss.

This is my gulp process:

var iconfont      = require('gulp-iconfont'),
    rename        = require('gulp-rename'),
    sketch        = require('gulp-sketch'),
    consolidate   = require('gulp-consolidate'),
    runTimestamp  = Math.round(Date.now()/1000),
    fontName      = 'font-lite';

gulp.task('iconfont', function() {
  return gulp.src([ app + 'templateFonts/symbols.sketch' ])
    .pipe(sketch({
      export: 'artboards',
      formats: 'svg'
    }))
    .pipe(iconfont({
      fontName: fontName,
      appendUnicode: false,
      formats: [ 'ttf', 'eot', 'woff', 'woff2', 'svg' ],
      timestamp: runTimestamp,
      normalize: true
    }))
    .on('glyphs', function(glyphs) {
      var options = {
        glyphs: glyphs.map(function(glyph) {
          return {
            name      : glyph.name,
            codepoint : glyph.unicode[0].charCodeAt(0).toString(16).toUpperCase()
          };
        }),
        fontName: fontName,
        fontPath: '../fonts/',
        className: 'icon'
      };
      /* CSS fonts */
      gulp.src(app + 'templateFonts/iconTemplate.scss')
        .pipe(consolidate('lodash', options))
        .pipe(rename({ basename: fontName }))
        .pipe(gulp.dest(app + 'styles/04-Icons'));
      /* HTML example fonts (guide) */
      gulp.src(app + 'templateFonts/iconTemplate.html')
        .pipe(consolidate('lodash', options))
        .pipe(rename({ basename: fontName }))
        .pipe(gulp.dest(app));
    })
    .pipe(gulp.dest(app + 'fonts'));
});

Thanks

We need `gulp watch`

Hi, everyone!
I need your help to improve this template.

Sketch.app saves the file automatically in the background. With usual way of gulp, too much save events will be emitted. Does anyone have a good way to catch just the save events by the user?

For example, the code below doesn't work well. Umm..

gulp.task('watch', function() {
  gulp.watch('symbol-font-14px.sketch', ['symbols']);
});

Adapt to gulp-iconfont 2.0.0

The new version includes new features but also breaking changes.

No longer generating a font

I'm currently experiencing issues with generating webfont files from my updated Sketch files. The last time I used this script was November 2015. Is anyone seeing the same thing? Any chance it has to do with the Sketch 3.7 update?

iconfont glyphs code issue

When I added new icon to the Sketch file and generated the font file it change the iconfont glyphs code every time. Is there way to fixed this?

The .svg font is not generated.

The Sketch Version: 3.4.3

urgent imac online wait

minqin-iMac:symbols-for-sketch-master eric$ npm install
npm WARN locking Error: EACCES, open '/Users/eric/.npm/_locks/lodash-33d7628955629415.lock'
npm WARN locking at Error (native)
npm WARN locking /Users/eric/.npm/_locks/lodash-33d7628955629415.lock failed { [Error: EACCES, open '/Users/eric/.npm/_locks/lodash-33d7628955629415.lock']
npm WARN locking errno: -13,
npm WARN locking code: 'EACCES',
npm WARN locking path: '/Users/eric/.npm/_locks/lodash-33d7628955629415.lock' }
npm ERR! Darwin 14.1.0
npm ERR! argv "node" "/usr/local/bin/npm" "install"
npm ERR! node v0.12.7
npm ERR! npm v2.11.3

npm ERR! Attempt to unlock /Users/eric/Desktop/symbols-for-sketch-master/node_modules/lodash, which hasn't been locked
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR! https://github.com/npm/npm/issues
npm WARN locking Error: EACCES, open '/Users/eric/.npm/_locks/gulp-e6c74ed8c0891f04.lock'
npm WARN locking at Error (native)
npm WARN locking /Users/eric/.npm/_locks/gulp-e6c74ed8c0891f04.lock failed { [Error: EACCES, open '/Users/eric/.npm/_locks/gulp-e6c74ed8c0891f04.lock']
npm WARN locking errno: -13,
npm WARN locking code: 'EACCES',
npm WARN locking path: '/Users/eric/.npm/_locks/gulp-e6c74ed8c0891f04.lock' }
npm ERR! Darwin 14.1.0
npm ERR! argv "node" "/usr/local/bin/npm" "install"
npm ERR! node v0.12.7
npm ERR! npm v2.11.3

npm ERR! Attempt to unlock /Users/eric/Desktop/symbols-for-sketch-master/node_modules/gulp, which hasn't been locked
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR! https://github.com/npm/npm/issues
npm WARN locking Error: EACCES, open '/Users/eric/.npm/_locks/gulp-consolidate-410a9579567f7c65.lock'
npm WARN locking at Error (native)
npm WARN locking /Users/eric/.npm/_locks/gulp-consolidate-410a9579567f7c65.lock failed { [Error: EACCES, open '/Users/eric/.npm/_locks/gulp-consolidate-410a9579567f7c65.lock']
npm WARN locking errno: -13,
npm WARN locking code: 'EACCES',
npm WARN locking path: '/Users/eric/.npm/_locks/gulp-consolidate-410a9579567f7c65.lock' }
npm ERR! Darwin 14.1.0
npm ERR! argv "node" "/usr/local/bin/npm" "install"
npm ERR! node v0.12.7
npm ERR! npm v2.11.3

npm ERR! Attempt to unlock /Users/eric/Desktop/symbols-for-sketch-master/node_modules/gulp-consolidate, which hasn't been locked
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR! https://github.com/npm/npm/issues
npm WARN locking Error: EACCES, open '/Users/eric/.npm/_locks/gulp-iconfont-5615a23f45f66c9a.lock'
npm WARN locking at Error (native)
npm WARN locking /Users/eric/.npm/_locks/gulp-iconfont-5615a23f45f66c9a.lock failed { [Error: EACCES, open '/Users/eric/.npm/_locks/gulp-iconfont-5615a23f45f66c9a.lock']
npm WARN locking errno: -13,
npm WARN locking code: 'EACCES',
npm WARN locking path: '/Users/eric/.npm/_locks/gulp-iconfont-5615a23f45f66c9a.lock' }
npm ERR! Darwin 14.1.0
npm ERR! argv "node" "/usr/local/bin/npm" "install"
npm ERR! node v0.12.7
npm ERR! npm v2.11.3

npm ERR! Attempt to unlock /Users/eric/Desktop/symbols-for-sketch-master/node_modules/gulp-iconfont, which hasn't been locked
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR! https://github.com/npm/npm/issues
npm WARN locking Error: EACCES, open '/Users/eric/.npm/_locks/gulp-sketch-55bf99522704021c.lock'
npm WARN locking at Error (native)
npm WARN locking /Users/eric/.npm/_locks/gulp-sketch-55bf99522704021c.lock failed { [Error: EACCES, open '/Users/eric/.npm/_locks/gulp-sketch-55bf99522704021c.lock']
npm WARN locking errno: -13,
npm WARN locking code: 'EACCES',
npm WARN locking path: '/Users/eric/.npm/_locks/gulp-sketch-55bf99522704021c.lock' }
npm ERR! Darwin 14.1.0
npm ERR! argv "node" "/usr/local/bin/npm" "install"
npm ERR! node v0.12.7
npm ERR! npm v2.11.3

npm ERR! Attempt to unlock /Users/eric/Desktop/symbols-for-sketch-master/node_modules/gulp-sketch, which hasn't been locked
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR! https://github.com/npm/npm/issues
npm WARN locking Error: EACCES, open '/Users/eric/.npm/_locks/coffee-script-71bf1ad99445843a.lock'
npm WARN locking at Error (native)
npm WARN locking /Users/eric/.npm/_locks/coffee-script-71bf1ad99445843a.lock failed { [Error: EACCES, open '/Users/eric/.npm/_locks/coffee-script-71bf1ad99445843a.lock']
npm WARN locking errno: -13,
npm WARN locking code: 'EACCES',
npm WARN locking path: '/Users/eric/.npm/_locks/coffee-script-71bf1ad99445843a.lock' }
npm ERR! Darwin 14.1.0
npm ERR! argv "node" "/usr/local/bin/npm" "install"
npm ERR! node v0.12.7
npm ERR! npm v2.11.3

npm ERR! Attempt to unlock /Users/eric/Desktop/symbols-for-sketch-master/node_modules/coffee-script, which hasn't been locked
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR! https://github.com/npm/npm/issues
npm WARN locking Error: EACCES, open '/Users/eric/.npm/_locks/gulp-rename-6bbaad98c612ab56.lock'
npm WARN locking at Error (native)
npm WARN locking /Users/eric/.npm/_locks/gulp-rename-6bbaad98c612ab56.lock failed { [Error: EACCES, open '/Users/eric/.npm/_locks/gulp-rename-6bbaad98c612ab56.lock']
npm WARN locking errno: -13,
npm WARN locking code: 'EACCES',
npm WARN locking path: '/Users/eric/.npm/_locks/gulp-rename-6bbaad98c612ab56.lock' }
npm ERR! Darwin 14.1.0
npm ERR! argv "node" "/usr/local/bin/npm" "install"
npm ERR! node v0.12.7
npm ERR! npm v2.11.3

npm ERR! Attempt to unlock /Users/eric/Desktop/symbols-for-sketch-master/node_modules/gulp-rename, which hasn't been locked
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR! https://github.com/npm/npm/issues

npm ERR! Please include the following file with any support request:
npm ERR! /Users/eric/Desktop/symbols-for-sketch-master/npm-debug.log
minqin-iMac:symbols-for-sketch-master eric$

my english is disaster. so i hope you reply ：step 1,step 2,step 3... thank you

Transformed elements not shown properly

In case anyone running into problems with transformed elements, have a look at svgicons2svgfont.

Icons generated small

I'm getting my icons small and below the line-height for some reason. Anyone else experience this?

Task is written in ES6: symbols task issue

Hello,

I have encounter an issue when i try to run symbols task

i runned npm install and installed xcode, global gulp and sketch tools

Do you have an idea ?

I also noticed that there are many packages are deprecated

sketch version : 3.7.2
node version : v0.10.44

thx for your help

gulp.task('symbols', () =>
^
SyntaxError: Unexpected token )
at Module._compile (module.js:439:25)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:312:12)
at Module.require (module.js:364:17)
at require (module.js:380:17)
at Liftoff.handleArguments (/usr/local/lib/node_modules/gulp/bin/gulp.js:116:3)
at Liftoff. (/usr/local/lib/node_modules/gulp/node_modules/liftoff/index.js:193:16)
at module.exports (/usr/local/lib/node_modules/gulp/node_modules/flagged-respawn/index.js:17:3)
at Liftoff. (/usr/local/lib/node_modules/gulp/node_modules/liftoff/index.js:185:9)

Sketch 3.1 introduce new file format

According to their blog, Sketch 3.1 is now available today :)

You should update these, before using the new version with our template.

sketchtool 1.2: you can get it from here.
gulp-sketch 0.0.6: $ npm update gulp-sketch or just $ npm update

Safari in OS

Hey guys!
This tool it's amazing.

Does this code work for Safari in IOs?
Works like charm in Chrome but not Safari

14px file stops working for no reason

I have been using symbols-for-sketch, and now 14px doesn't work. Nothing has changed, and I tested it on a newly pulled 14px sketch file, still doesn't work.

Feature request - use pages as font weights

It would be really awesome if multiple pages could be interpreted as font weights. This way, an optimized icon could be served for different sizes, ex: sm, md, lg.

Another example is in the iconic docs https://useiconic.com/guides/how-to-use-the-icon-font/

Where's the dist directory?

Maybe a dumb question, but not being a Sketch, gulp or NPM user for the most part, where's the dist directory that the CSS and fonts are supposed to be dumped in?

Doesn't work since Sketch 3.5

Hello,

I've send a request to BohemianCoding in order to figure out what have change in Sketch/Skecth Tool, but personnally symbols-for-sketch doesn't work anymore since last update (3.4 -> 3.5).

In fact, it work out of the box, without editing or opening anything, but once i open a sketch file, nothing is rendered in the dist folder.. I dont know what new behaviour cause this issue but if someone here have a clue i'll be glad to read it :)

Best regards

Error generating the files

Hi!
First of all, thank you for developing this amazing project.

I'm getting an error when trying to generate the files with the command gulp symbols:

gulp symbols
[11:02:49] Using gulpfile /Applications/XAMPP/xamppfiles/htdocs/fonts/symbols-for-sketch-master/gulpfile.js
[11:02:49] Starting 'symbols'...
[11:02:49] Finished 'symbols' after 15 ms

events.js:72
throw er; // Unhandled 'error' event
^
Error: spawn EACCES
at errnoException (child_process.js:1001:11)
at Process.ChildProcess._handle.onexit (child_process.js:792:34)

I've installed the latest versions of node.js, gulp and sketch tools, I was just wondering if you have had come across this issue before or if you had any idea of what can be going wrong.

Thank you very much!

Can I use ligatures?

For the layer naming, is it possible to use ligatures instead of single Unicode characters?

Error: spawn sketchtool ENOENT

Hey - I downloaded and ran npm and gulp and am receiving the following error:

Error: spawn sketchtool ENOENT
    at exports._errnoException (util.js:746:11)
    at Process.ChildProcess._handle.onexit (child_process.js:1053:32)
    at child_process.js:1144:20
    at process._tickCallback (node.js:355:11)

Can't find a previous error on this so wondering if you know what you think it might be.

IE9 doesn't show the icons

Hi ,
I used symbols-for-sketch to generate the font icon.The sample.html works fine under chrome and firefox,but when we test it under IE, IE11 works fine too,but the icons can't be shown under IE9.Could you take a look at this?Thanks.

Generated fonts not working on windows/linux

Hi,

Great project!
I tried making my own icon font, and it all worked fine on my mac.
However, when I try to view the generated icons on windows or linux, a lot of icons are 'filled'. So a circle with a one it it looks fine on osx, but is a completely black circle on win/linux.

Is there a special way to draw the icons or is this an export issue?

Thanks!

true type output significantly worse

Curves in True Type output is significantly worse than that in Sketch.

What is the problem? Can I output PostScript font?

The problem with the transform icon

If the icon in the Sketch rotate or do a flip then he is outside his field and is displayed incorrectly.

After compile