Code Monkey home page Code Monkey logo

sketch-icons's Introduction

alt text

Sketch Icons

A Sketch plugin that allows you to import a set of icons and automatically apply a color style.

Discover our new website!

📣 Read our Medium article to use Sketch Icons efficiently

⚠️ If you have some troubles with Sketch Icons, here are some recommendations:

  • Sketch Icons is not compatible with MacOS El Capitan
  • It seems that Sketch Focus plugin is preventing Sketch Icons from working properly, so please disable it

Features

Since the arrival of nested symbols and Sketch libraries, our worfklow has been incredibly improved.

But if, like us, you have wondered how to import all of your icons into Sketch and how to apply a color individually... Then this plug-in is made for you.

  1. Import a folder or a set of icons.
  2. Choose a color library and apply automatically a color.
  3. Enjoy your dynamic icons library.

That's all. ❤️

Import icons

Just go to Plugins -> Sketch Icons -> Import icons... and select your folder or your icons. You can also use the keyboard shortcut cmd + shift + i.

alt text

And... Voilà ! Your dynamic icons library is ready!

Replace severals icons

To save you even more time, we have designed a feature that allows you to replace or update icons already imported into your library. You will find this feature in Plugins -> Sketch Icons -> Replace icons....

alt text

✨ Organize icons (New)

You can now drag and drop your icons directly into Sketch (from a folder or an application like IconJar). Once your icons are dropped, select the set and go to Plugins -> Sketch Icons -> Organize icons....

alt text

Add a color on several icons

If you want to apply a color to an icon - or a set of icons - you can use this functionality Plugins -> Sketch Icons -> Apply a color.... You can also use the keyboard shortcut cmd + shift + m.

alt text

That's about all you need to know. This should save you a lot of time!

Do not hesitate to come back to us. We want your feedback :)

How to install the plugin

We recommend installing the plugin with Sketch runner.

Method 1: Sketch runner

Open Sketch Runner, search for "Sketch Icons", and click "Install".

runner-badge-blue

Method 2: Manually

  1. Download the ZIP file and unzip
  2. Open Sketch Icons.sketchplugin

Contact/Feedback

Sketch Icons is designed by Valentin Chrétien and developed by Antoine Moreaux.

If you have any questions, feel free to contact us directly on Twitter or drop us an email. Feedback is always appreciated :)

Thanks guys!

If this plugin saves you time, do not hesitate to send us small messages of thanks!

You can also offer us some beers or coffees.

sketch-icons's People

Contributors

amoreaux avatar dependabot[bot] avatar pierreantoinel avatar skpm-bot avatar valentinchrt avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

sketch-icons's Issues

Plugin not responding

Plugin shows no response at all. I just updated OS to High Sierra 10.13.3 running a older version of Sketch 47.1

Problem with color mask and rotated shapes

Hi,
first of all thank you for the plugin and keeping it updated. It's really great!

I noticed the apply color mask function behaves weird when applying it to rotated shapes. I can't specify exactly what is happening, but it seems to somehow "reset" the rotation or something.

Maybe you can look into that?

I attached a sample file that shows some bugs.

color-mask-bugs.sketch.zip
.

Apply color mask doesn't apply mask

When I try to apply a Color mask via Symbol it just colorizes the shapes in the symbol directly and doesn't add the color as a mask. So I can't change the color in the overrides.

replace mask with style

Now that sketch 51 supports layer style overrides, I'd like to move away from masks and into styles. Would love for this plugin to let me apply a layer style to all icons.

Mask not working

When importing icons or adding a mask to already-created icons, mask never applies. Running sketch 48.2 on mac.

Your PlugIn is failing

with the newest update from Sketch 52.1, there is no way to use the plugIn to import icons.

Path added to shape renders the icon into square

Hi, I just installed the plugin (High Sierra, using sketch runner).

When I try to import the icons I am getting a very weird behaviour: Icons are smashed into a solid colour square.
screen shot 2018-01-23 at 19 29 18

I reviewed the output and found that the problem is caused by a squared path that is added to the icon.
sketch-icons-bug

I have 100+ icons on this project so going one by one removing the Path is just impossible. Please help! :)

"Import icons..." modal dialog lack of all input element

First of all, thank you for the greet work!
Alter I click "Import icons..." menu button, a modal dialog shows ,but not completely.
It seems all input elements in the modal dialog are missing. See attachment below.

I've tried reinstall the plugin (manually or via Runner),disable all other plugins, but neither works

OS ver:10.13.5 High Sierra
Sketch ver:45.2
stitch-icons ver:4.0.5

image

Missing .sketchplugin file

Hi AMoreaux,
it seems the executable .sketchplugin file is missing in the package in this latest update.
I tried and downloaded a couple of time but nothing. In your readme.md file the link is to the previous version.

Thanks,
A

Plugin doesn't work?

I can successfully install the plugin, but the menu items don't do anything.

Sketch version 48.1
Mac OS 10.13.2

Wrong version number in manifest.json

3.0.14 can't be installed with Sketch's plugin updates because the .zip referenced in the appcast.xml has the wrong version number (3.0.12) in its manifest.json.

Errors for Import Icons

When I try to import SVG files and apply a color mask, and convert to symbol, it is only importing the file, it is NOT applying a color mask, and NOT converting to a symbol. Here is the error I'm seeing in the Plugin Output console:

ERROR: TypeError: undefined is not an object (evaluating 'e.layers().reverse().forEach') «Plugin Output»
ArtboardChanged «Plugin Output»

Enhancement: Respect icon position and size within SVG viewBox/canvas

Is it possible to adopt the position and size of the icon path/shape within the original SVGs viewBox/canvas?

In other words: When I have an icon on a 48x48px canvas which is actually only 40x40px large and an icon on a 48x48px canvas which extends to 44x44px and I import them using the Plug-In, the original proportions between the two icons are lost, as both are scaled to the size defined at import (minus padding).

I know Sketch throws this information away when importing SVGs.

A possible workaround might be: Adding a rectangle of the viewBox' size to every SVG before importing and deleting that rectangle afterwards.

Awesome plugin btw, might be really useful. Thanks and congrats!

Subdirectories

I have a large icon set, divided into subfolders. Right now if I choose the parent folder, nothing gets imported. I have to go through each individual subfolder. Could it be set up to search for icons recursively?

Masks not being applied

When I select one or many artboards and try to "Apply color mask..." masks are not applied. I'm using the latest version of Sketch and I'm on the latest Mac OS.

Color mask is not working

It is not possible to import svg with a color mask, either from my custom colors or applying one via plugin.

Not working with 47.1 on 10.13.2 (High Sierra)

Just downloaded and installed the plug-in.

When I try Import, nothing comes up. Nothing seems to happen at all.

I tried disabling all other plug-ins, but that didn't have any effect.

Create symbol from Color Picker Color Source

Add option to to create a symbol from the selected color picker color.

This is more of a nice-to-have when generating large icon libraries. If you are allowing the user to pick a color, giving them the ability to convert that picked color into a dynamic symbol in the same step would compliment the plugin's intended functionality.

Remove Black Fill from Dynamic Color Masked Icons

When generating an icon with a dynamic color mask allow an option to remove the black fill on the vector shape. Currently, if the dynamic color mask has alpha transparency, it is obscured by the black fill and requires the user to have to

  1. Generate icons without color mask
  2. Select all icons and remove black fill
  3. update selected icons with dynamic color mask

Remove fill option would allow user to just generate icons without black fill.

Sketch 49 issues

After updating to Sketch v49, this plugin will no longer apply a mask. It doesn't allow me to choose a color symbol as the mask color from the same document or any library even though the libraries are listed in the dropdown.

After the import has finished some of the icons are not sized properly – they remain enormous in size.

Screenshot

Settings

  • Default size and padding
  • Display modal to retype padding and size when replace icon. (checkbox)
  • Link to folder (#23)

Sketch Icon Error on Sketch version 50!

I have trouble in making for mask for icon when using plug-in on sketch version 50, could you please send me an updated version to activate this function? Thank u so much : )

Export icons function

It could be extremely useful to be able to export a selection of icons using an inverse method of importing. I mean… I would like to be able to export without the color symbol applied to a shape mask. The shape used as mask then will have a variable hexadecimal color fill.

For example, in icomoon you can export your icons set with another color applied.

So then we would have cleaner svgs!


Perhaps it helps…
My friend @sandhose told me :
Launch the terminal, go to your assets folder et type :
sed -i ‘’ -e ‘/<rect /d’ ./*
It will remove from the svg file the line <rectangle …> used for the color.

Request: Simple creation of masked icons

Thanks for this one! I had a similar idea for a plugin to generate these icons. The huge downside is, i take a lot of stroked icons and they need to be converted to shapes so that they work as a mask. Another downside was the creation of the symbol itself. I would recommend/had the following workflow concept in my mind:

  1. Drag n drop you icon/icons (I use iconjar/nucleo)
  2. Select the icons
  3. Shortcut to create the symbol including the masking of it. A popup appears with all necessary settings
  4. Push it to the symbol page

In your workflow i have to create the stroke to shape and also the artboard itself. In most of the projects i gather the icons while i am working on the project. I am not importing 10+ icons at once.

Empty symbols when importing outlined icons

Hi there,
I'm trying to import the Feather icon sets. Icons are outlined, so it's only a path with a 2px border.
Once I import an icon with the Sketch-icons plugin, the symbol is empty.

I have no problem with a filled icon. I did the test myself with two icons I created: one with a fill and no border, the other with a border but no fill.

Sketch version: v48.2

Carl —

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.