Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/keremciu/sketch-iconfont
This plugin helps you easily insert and manage icons from icon fonts.
https://github.com/keremciu/sketch-iconfont
icon icon-font sketch sketch-plugin
Last synced: 6 days ago
JSON representation
This plugin helps you easily insert and manage icons from icon fonts.
- Host: GitHub
- URL: https://github.com/keremciu/sketch-iconfont
- Owner: keremciu
- Created: 2015-09-12T19:22:47.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2021-02-26T16:46:24.000Z (almost 4 years ago)
- Last Synced: 2024-11-30T23:06:51.461Z (13 days ago)
- Topics: icon, icon-font, sketch, sketch-plugin
- Language: JavaScript
- Homepage:
- Size: 239 KB
- Stars: 1,970
- Watchers: 50
- Forks: 102
- Open Issues: 25
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
README
[][paypal-donations]
[](https://github.com/keremciu/sketch-iconfont/releases)
[](https://gitter.im/keremciu/sketch-iconfont?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
# New plugin
Hello everyone! I just created a totally new plugin to establish easier and reliable workflow. if you'd like to test out, it's here: https://github.com/keremciu/sketch-iconfont-web waiting for your feedback! :)
---
⚠️ **BEFORE UPDATE**:
If you're using custom icon fonts, please export your font bundle like this: [VIDEO](http://recordit.co/oxABJWnBeT)
then update the plugin, you can install the your custom-font-bundle without losing your custom fonts.
### Dark Mode supports - 18 March 2019 (version 4.7.0)
- Adds dark mode support
### Version 48 supports - 7 December 2017 (Version 4.6.0)
## New version and release video is coming - 19 January 2017
- I took a video about import custom icons ([VIDEO](http://recordit.co/wy5ihqjPml))
[](http://recordit.co/wy5ihqjPml)
### Version 41 supports - 9 November 2016 (Version 4.5.1)
- ColorWithSVGString method deprecated, I fixed it
##### Non-text layer selection problem fixed - 4 October 2016 (Version 4.4.2)
Problem here https://twitter.com/mwstrmnn/status/782979129780146178
### New Features and Fixes - 17 August 2016 (Version 4.4.0)
Hey guys, I've fixed the problem with 3.91 version of Sketch.
Also we've new features like multiple text change, I will share gifs about them soon. Before sharing gifs, you can find and use them :)
### First Install
First use? you need to watch ([THIS VIDEO](http://recordit.co/2PMTB04Jav))
##### Please if you have an issue, first watch the video.
### New Feature - Convert Command - 29 April 2016
![demo][demo-image]
Your teammates don't have your icon-fonts? don't worry now you can convert all icons with one command then share it.
[demo-image]: http://g.recordit.co/TU3az70acC.gif
## Use Icon Fonts in Sketch
This plugin helps you easily insert and manage icons from icon fonts - such as FontAwesome, Ion or Material Design Icons - in your Sketch designs.
##### Use any icon font.
The plugin itself has no font built-in. You will need to download and install the fonts you wish to use directly from the font publisher. The most popular ones, however, have been put into a bundle which you can easily download from here: https://github.com/keremciu/font-bundles
=======
### - Features
###### Why you need to use it
> `For The Designer:`
> When a designer wants to add an icon from an icon font - such as material design, fontawesome, etc. - they usually need to find a cheatsheet containing all the font's icons, and then manually copy+paste each one they wish to use into their design - or use a third-party application. Time consuming and cumbersome.
- You can now easily view and add any icon directly Sketch!
> `For The Developer:`
> When a developer wants to find out the name of an icon that was used by the Designer, they need to search through a lengthy list of icons, until they find it. Time consuming and cumbersome.
- You can now easily find out an icon's name directly in Sketch, without needing to perform a search!
=======
### - Installation
### Using Sketch Toolbox
1. Install 'Sketch Iconfont' plugin directly from Sketch Toolbox.
2. Install a font containing an svg font file, or install a font bundle - such as the one provided here: https://github.com/keremciu/font-bundles
### Manually
1. Download and extract the ZIP bundle of this plugin from this repo.
2. Put the folder into your Sketch plugin folder (Use `Plugins > Reveal Plugins Folder` to find the plugin folder).
3. Install a font containing an svg font file, or install a font bundle - such as the one provided here: https://github.com/keremciu/font-bundles
=======
### - Documentation
###### Its a little documentation about commands
Command | Description
----------------------- | -----------------------------------------------------------------------------------------------
Install a Font-Bundle | Install a newly downloaded font bundle.
Export your Font-Bundle | Export or backup all of your icon fonts previously installed. Recommended to use before you install new version of the plugin.
Install a Font | Install a newly downloaded font - containing an svg font file.
Remove a Font | Remove a previously installed font.
Grid Insert | Insert an icon by searching for it in a visual grid table.
Name Insert | Insert an icon by name.
HTML of Selected Icon | To use an icon on web or mobile, select it and use this command.
### - Minimum Dependencies
- OSX El Capitan & Yosemite ([#44](https://github.com/keremciu/sketch-iconfont/issues/44))
- Sketch 3.4.4.
You can follow me on twitter to get updates.
http://twitter.com/keremciu
#### License
MIT
=======
#### Donate
:beers:
how about supporting my time-savers? if you'd like to buy me a beer, you can make it on PayPal then I can focus more on this stuff while having a beer 🍺 https://www.paypal.me/ciukerem
[paypal-donations]: https://www.paypal.me/ciukerem
#### Old version
You can see an old version of this plugin here: http://i.imgur.com/EBGmlSe.gif - and you can download it from here: https://github.com/keremciu/sketch-iconfont/tree/oldversion