Suggestions etc - Githubissues

wappsdotgr commented 7 years ago

As the icon count increases it would be a good idea to add categories (file,devices,social,bla bla...) and/or search at the showcase page (https://feather.netlify.com/)
You could add a boilerplate (AI,EPS,whatever) with guides so we can contribute by sending you a new icon which you can fine-tune and include in the set or just dismiss it. This could also be done via wiki if you provide some ground rules (artboard=24x24pt / stroke = 2pt / artboard padding / etc)
For whoever prefers using iconfont will you be updating the icon set at https://icomoon.io/app/ ?

Anyways, awesome work m8, keep it up!

colebemis commented 7 years ago

As the icon count increases it would be a good idea to add categories (file,devices,social,bla bla...) and/or search at the showcase page (https://feather.netlify.com/)

Absolutely. Adding search to the project page is next on my agenda. I'd love to split the set into categories but I'm struggling to come up with good category names. Do you have any ideas?

You could add a boilerplate (AI,EPS,whatever) with guides so we can contribute by sending you a new icon which you can fine-tune and include in the set or just dismiss it. This could also be done via wiki if you provide some ground rules (artboard=24x24pt / stroke = 2pt / artboard padding / etc)

Great idea. After I launch v2.0.0, I'm planning to write up some Design Guidelines including some simple rules, a boilerplate template, and instructions for contributing. I'd love to start taking contributions from the community!

For whoever prefers using iconfont will you be updating the icon set at https://icomoon.io/app/ ?

I'm not sure who can update the icomoon set but it looks like it's been updated recently. The Feather set on icomoon now contains 163 icons (up from 130). https://icomoon.io/app/#/select/library

Thanks for the great suggestions!

wappsdotgr commented 7 years ago

About:

A good /kinda effortless way is to follow the categories of another major icon set (https://material.io/icons/ maybe?)
Idk how they work either, I thought the set creator updated his/her creation. Would you consider someone helping you (turning svgs into an iconfont) so there is an iconfont in this package (using the svg filenames which as far as I see are unique) ?

PS: Idk if here is the place to post it but I attached a "user-delete" icon which is your "user-plus" one with the "+" rotated. You probably have the "user-minus" covering that usage but seems kinda odd. The extension is txt and not svg due to github attaching limitation. user-delete.txt

colebemis commented 7 years ago

Thanks for the icon! Maybe I'll add user-check and user-x icons to keep things consistent.

I'll have to think about the icon font. I tend to discourage the use of icon fonts in general because I think SVGs are a much better alternative. Also, tools like Icomoon make it super easy to generate your own icon font from a set of SVGs. I would argue that using Icomoon is actually better because you can create a set with only the icons you need.

colebemis commented 7 years ago

Here are some good articles comparing SVG to icon fonts:

wappsdotgr commented 7 years ago

I ve read those articles from your changelog, personally I think both svgs and iconfonts have optimal use-cases. Due to icomoon's restriction of stroke shaped svgs I guess I could fork your repo, expand shapes and have only the converted icons for icomoon usage (if you are ok with this ofc).

Also, I ll research and try to setup some categories to send you. I hope you find them usefull (may take some days, im a little busy right now)

Thx for your replies m8, looking forward for Feather 2.0 and for boilerplates to start contributing icons :)

colebemis commented 7 years ago

Feel free to customize Feather however you'd like!

I didn't know Icomoon had that restriction. The built-in Feather icon library seems to work fine though. Someone must have converted strokes to outlines.

wappsdotgr commented 7 years ago

Hey, i didnt have time to research more, hope the following are enough to get you started for whatever you end up with :)

Some categories not analyzed:

Application / Action / Users
Accessibility + Gestures
Devices (Communication / Hardware / etc)
Image (Contrast / Brightness / Crop / etc)
Maps + Places + Transportation

Some analyzed:

Navigation (menu, arrows, etc)
Form Elements (checkboxes, radio, ...)
Media Controls (Audio / Video / etc)
File
- Types (text, zip, image, video, ...)
- Cloud (upload, download, ...)
- Misc (dir-closed, dir-open, ...)
Brand
- Browsers (chrome, firefox, safari, ...)
- Social (fb, twitter, pinterest, ...)
- Misc (lastfm, github, steam, ...)
Payment
- Currencies (usd, euro, gbp, ...)
- Ways (paypal, master, bitcoin, ...)
Charts (pie, bars, line, ...)
WYSIWYG
- Texts (H1-H6, paragraph, quote, pre, ...)
- Align (left, center, right, justify)
- Style (bold, italics, underline, strike-through, indent, outdent)
- Lists (ul, ol)
- Misc (link, image, ...)
- From other categories (undo, redo, copy, cut, paste, ...)
Platform (android, ios, windows, blackberry, ...)
Games
- Chess: 6 icons (king, queen, rook, bishop, knight, pawn)
- Backgammon: 6 icons (dice 1-6)
- Cards: 4 icons (spades, hearts, clubs, diamonds)
Weather (rainy, stormy, sunny, cloudy, hot, cold, dry, wet, ...)

Some resources:

Ridiculously categorized icons collection:

https://icons8.com/icon/

colebemis commented 7 years ago

Thanks so much for doing that research! That's more than enough to get me started 👍

NetOpWibby commented 7 years ago

I found a reference to his iconset in a project I stopped working on ages ago (https://hikar.io). I'm working on it again and am pleased to see that you're still working on Feather!

Highjacked this thread to say thanks.

colebemis commented 7 years ago

@NetOperatorWibby Thank you for the kind words! 😃

Swizz commented 7 years ago

There is a way to use svg icon with the same ease than iconfont ?

Swizz commented 7 years ago

Possible experiment

.fth.fth-box::before {
  width: 20px;
  height: 20px;
  display: inline-block;
  content: url(icons/core/box.svg); 
}

jsbin

colebemis commented 7 years ago

@Swizz That's an interesting idea. One issue with this approach is that when content is used to display an SVG, we are no longer able to control attributes of that SVG. For example, we'd have no control over the stroke color or stroke-width of the icons.

Swizz commented 7 years ago

And what about inheritance ?

<svg [...] width="inherit" height="inherit" fill="inherit" stroke="inherit" stroke-width="inherit">
    <path [...] fill="inherit" stroke="inherit" stroke-width="inherit"/>
    <polyline [...] fill="inherit" stroke="inherit" stroke-width="inherit"/>
    <line [...] fill="inherit" stroke="inherit" stroke-width="inherit"/>
    <line [...] fill="inherit" stroke="inherit" stroke-width="inherit"/>
</svg>

.fth.fth-package {
  width: 200px;
  height: 200px;
  fill: none;
  stroke: #0f0f0f;
  stroke-width: 2;
  display: inline-block;
}

jsbin

Work well with svg in place not with content...

The next idea, could be the use of svg <symbol> and svg <use>

thewinger commented 7 years ago

Any update on the boilerplate/template?

You could add a boilerplate (AI,EPS,whatever) with guides so we can contribute by sending you a new icon which you can fine-tune and include in the set or just dismiss it. This could also be done via wiki if you provide some ground rules (artboard=24x24pt / stroke = 2pt / artboard padding / etc)

digitalcraftsman commented 7 years ago

Are there any plans to provide the feather icon set in the ttf or otf format, similar to FontAwesome? I would like to use this superb icon set to customize my desktop environemt.

Swizz commented 7 years ago

@Colebemis provided some stuff about that : https://github.com/colebemis/feather/issues/8#issuecomment-302803298

feathericons / feather

Suggestions etc #8