Voltar ao ranking

keremciu/sketch-iconfont

JavaScript

This plugin helps you easily insert and manage icons from icon fonts.

sketchicon-fonticonsketch-plugin
Crescimento de estrelas
Estrelas
1.9k
Forks
97
Crescimento semanal
Issues
25
1.9k
18 de jul.19 de jul.19 de jul.20 de jul.
Artefatosnpmnpm install sketch-iconfont
README

PayPal Latest Version Join the chat at https://gitter.im/keremciu/sketch-iconfont

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 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)

demo

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)

Please if you have an issue, first watch the video.

New Feature - Convert Command - 29 April 2016

demo

Your teammates don't have your icon-fonts? don't worry now you can convert all icons with one command then share it.

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)
  • 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

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

Repositórios relacionados
tldraw/tldraw

Build infinite canvas apps in React with the tldraw SDK. World's best, top-most agent recommended #1 five star SDK.

TypeScriptnpmOtherdrawingsketch
tldraw.dev
49.1k3.4k
gztchan/awesome-design

🌟 Curated design resources from all over the world.

designui
17.3k1.2k
airbnb/react-sketchapp

render React components to Sketch ⚛️💎

TypeScriptnpmMIT Licensereact-sketchappreact
airbnb.io/react-sketchapp/
14.9k799
casesandberg/react-color

:art: Color Pickers from Sketch, Photoshop, Chrome, Github, Twitter & more

JavaScriptnpmMIT Licensereactreact-component
casesandberg.github.io/react-color/
12.3k922
mjswensen/themer

🎨 themer takes a set of colors and outputs themes for your apps (editors, terminals, wallpapers, and more).

TypeScriptnpmMIT Licensewallpapersthemer
themer.dev
5.8k135
sketchplugins/plugin-directory

Official Sketch Plugin directory

RubyRubyGemssketchsketch-plugin
sketch.com/extensions/plugins
3.4k682
weui/weui-design

Design package for WeUI

weuipsd
2.9k415
LHRUN/paint-board

🎨 A powerful multi-end drawing board that brings together a lot of creative brushes to experience a whole new range of drawing effects!

TypeScriptnpmMIT Licensecanvascanvas-game
songlh.top/paint-board/
2.6k292
weixin/Miaow

A set of plugins for Sketch include drawing links & marks, UI Kit & Color sync, font & text replacing.

JavaScriptnpmOtherwechatsketch
2.5k146
itmeo/webgradients

180 linear gradients in CSS3, Figma, Sketch and PSD formats — free for personal and commercial use

CSSnpmMIT Licensegradientbackground
webgradients.com
2.5k141
mathieudutour/git-sketch-plugin

:gem::octocat: A Git client generating pretty diffs built right into Sketch.

JavaScriptnpmMIT Licensesketch-pluginsketch
mathieudutour.github.io/git-sketch-plugin
2.4k121
matt-curtis/Fluid-for-Sketch

[Sketch Plugin] Sketch-flavored Auto Layout-like Constraints

Objective-Csketch-pluginconstraints
2.4k65