Under options, the fontHeight is set to 96, which is a common multiple of 16 and 24. The webfont:icons task has some interesting options to be aware of. It runs SketchTool in the terminal and exports all the slices from assets/icons.sketch into the assets/icons/ folder based on the export settings of the slices in the document. The shell:exportIcons task is pretty straightforward. Let me walk you through some important lines. Then run sketchtool to confirm that it is installed. Open up Terminal to the folder and run bash install.sh. Better yet, it doesn’t require Sketch installed in the system, so if the developer’s machine doesn’t have it, the tool will still work.ĭownload and extract it. The good people at Bohemian Coding created a super useful command-line utility called SketchTool that lets us export artboards and slices outside of Sketch. Its name will determine the CSS class name that you will use in your HTML (e.g.icon-home-24). It exists for the purpose of keeping the icon size intact when pasting the icon into your mock ups. flipped or rotated) are flattened (Layer → Paths → Flatten).īound – A hidden rectangle that defines the boundary of the icon. texts are converted to outline (Type → Convert Text to Outlines).strokes are vectorized (Layer → Paths → Vectorize Stroke).To ensure minimal issues when it is converted from a SVG to a font glyph, check that all… Icon Group – Contains the paths, preferably combined using boolean operations (union, subtract, etc). Note: You can download the final source project that demonstrates the front-end setup as you follow along.
Sketch app icon generator sketch how to#
This article will show you my workflow in creating a simple icon set for the web as well as how to automate the generation of font icons for your front-end project.
By using Sketch, SketchTool and Grunt, I’ve devised a way of being able to curate and design the icons in Sketch, and then conveniently transforming them into usable web fonts in one swoop of a build script.
Sketch app icon generator sketch manual#
But, they require you to be in the app and do some manual work such as uploading your SVGs and downloading the compiled assets into your project folder every time you make a change.īecause of this friction, I wanted to streamline the process without depending on a separate tool to manage the icons. There are several powerful tools like IcoMoon and Fontello which make it easier to manage and convert your vector icons into web fonts. However, creating one can be quite a hassle since this technique started out as a hack and there are no official ways of doing it. Font Icons Workflow with Sketch and Gruntįont icons, a scalable and flexible way of displaying flat monochromatic glyphs, is commonly leveraged by developers in websites and web apps.
0 kommentar(er)
