Atomicons

[simurai]

Description of the Change

This adds an Atomicons icon set. Similar to the Octicons, but has custom icons created for Atom only. Initially includes icons for the Outline view:

Usage

Just like the Octicons icon icon-xxx classes, but grouped with an icon-entity prefix. Example:

<span class="icon icon-entity-array">array</span>
<span class="icon icon-entity-boolean">boolean</span>

Alternate Designs

A better approach would be to use SVG for the icons, instead of a font. Then the icons could be multi colored, be animated, easier to position without sub-pixel blurryness and easier to update/maintain.

Downside: You can't just use a class to add an icon. The SVG needs to be added to the DOM. Atom would need some sort of <atomicon name="array" /> to <svg class="atomicon atomicon--array"><path d=....</svg> injector. Like etch-octicon.

Maybe still worth to try that before making these part of the official style guide. This PR is mostly to add icons to the Outline view package.

Why Should This Be In Core?

The Octicons are also in core.

Benefits

More relevant icons.

Possible Drawbacks

Maintenance cost.

Credits

"Atomicon" name: @Alhadis (somewhere in one of those issues).

[Alhadis]

Nice start, but I'm already seeing a lot of geometry that can be culled to produce the same curvature. You did say it was a WIP, though.

Please remember to avoid including margins, too. I've ranted about this topic so many times, but nobody listens...

[alexandernst]

Not really sure why 'function' has a 'filter' icon. 🤔

[YurySolovyov]

Maybe it is a matter of taste, but I'd say that function icon should have lambda on it

[YurySolovyov]

Also, module one looks too much like package. For modules I think the common metaphor is a piece of puzzle, or some object that has some connection points to it.

[simurai]

@alexandernst Not really sure why 'function' has a 'filter' icon.

I probably got @damieng's guidance wrong:

I thought => is meant as a "funnel".

@YurySolovyov Maybe it is a matter of taste, but I'd say that function icon should have lambda on it

Is "lambda" this λ, from the greek alphabet? Heh.. that looks like an upside down funnel. 🙃

[YurySolovyov]

Yeah, but it is a familiar metaphor for many

[thomasjo]

@simurai Here are a few examples taken from Eclipse, Visual Studio, IntelliJ, respectively:

---

1. http://help.eclipse.org/luna/advanced/content.jsp?topic=%2Forg.eclipse.cdt.doc.user%2Freference%2Fcdt_u_project_explorer_view.htm
2. https://docs.microsoft.com/en-us/visualstudio/ide/class-view-and-object-browser-icons
3. https://www.jetbrains.com/help/idea/2017.1/symbols.html

[alexandernst]

@simurai a lambda is usually a 1 liner function in many languages, this is why the lambda symbol (λ) is usually used as "function".

[thomasjo]

@simurai a lambda is usually a 1 liner function in many languages, this is why the lambda symbol (λ) is usually used as "function".

Have any examples of that? Several languages I use daily use the term "lambda", but never the symbol. E.g. Python and C++. The context isn't really a traditional function though — the context is usually always an anonymous, inline function. Not saying it's necessarily a bad choice, but it's hardly common. I've never seen an IDE use the lambda symbol to indicate a function.

[YurySolovyov]

Well, Eclipse's "dot" and VS's "box" are not super-descriptive to me, though one can say these will be more familiar for people who used these IDEs.

Should Atom set up a precedent of showing functions as lambdas?

[alexandernst]

@thomasjo The symbol lambda (λ) is not used in any language (that I'm aware of). But the fact that it's called lambda allows us to link it to lambda the symbol (λ), the same way we mentally link a diskette to "Save", even if computers nowadays don't have a diskette (nor we're actually saving to an external drive).

[alexandernst]

Another option would be to create an icon with the text f()

[simurai]

Here a version with the lambda symbol for function. Then wrapped in a circle for method. And for module it's more like "blocks" that you can use to build something:

And in context:

[Alhadis]

Could we get some context on where/how/when these icons will be used?

[damieng]

The icons will be used on Outline View and AutoComplete as part of the atom-languageclient work.

[damieng]

As an aside using the Lambda symbol is problematic as soon as you put it in a circle (class) as you end up with something confusingly similar to the Half-Life logo

[YurySolovyov]

I think Valve is smart enough not to complain about it :)

[Alhadis]

@damieng I believe simple geometry is ineligible for copyright; and theoretically, this isn't that far removed from copyrighting a capital L... at least if you're a Greek-speaker. =)

[damieng]

I'm okay with merging this for now so we can start on getting it implemented in the right places. If we need to tweak icons later we can.

It should be quite easy for people to create themes that mimic their favorite ide icons later.

[Alhadis]

Speaking as a graphic designer, I feel the choice of icons is too literal.

If I weren't so tired, I'd draw some examples of how abstracted geometry helps, but yeah...:(

[damieng]

I don't think we want to go abstract. A lot of the other IDE's already do that and I think we'll just get into "I got confused because X does Y for this please change it"

[Alhadis]

Thing is, if you're relying on an icon to convey the exact meaning of a function, that's pretty bad UX. Not to mention the cross-culturally insensitive. Different cultures are inclined to associate different meaning to certain imagery.

Anyway, doesn't matter. If you're happy, go for it. =) I won't even be seeing the icons, since I don't use outline view and have autocomplete turned off.

... I must sound so backwards to other Atom users, LOL.

[damieng]

Cross-culture is always a problem and some other IDEs are using letters (much worse, rely on English) and colors (also culturally sensitive). Additionally using f for function only makes sense in certain programming languages - would we then use 'm' for method? What about languages like VB.NET where it might be a Sub or a Function?

Really there is no silver bullet here and Atom doesn't even support localization today.

I think the icons we have above are good representations. There's a little bit of cultural stuff with numbers/letters/package/key however these are all heavily-used ideograms most users will be familiar with.

[Alhadis]

I suppose. IMHO, I feel types are better distinguished using different background colours (which autocomplete-plus uses anyway, right?)

Still, good points all around. And yeah, if any symbol should represent a function, it probably shouldn't be an 𝑓.

[damieng]

Ooops, only just noticed WIP. Ignore me :)

[simurai]

@damieng confusingly similar to the Half-Life logo

Damn.. now that you mentioned it, can't be unseen. 🙈

Well, here the refined version. All icons should now snap to whole pixels and look sharp also on non-retina screens (unless they get resized/realigned):

Since the next release is getting closer, I'll merge this once it goes green. Then the Outline view has at least "something" and doesn't have to wait another month.

[simurai]

How do you call these "variable, function, etc"? Is "entity" ok? Found it here.

Because rather than adding a new atomicon class, the new icons use the same icon icon-xxx convention, but grouped with icon-entity like:

<span class="icon icon-entity-array">array</span>
<span class="icon icon-entity-boolean">boolean</span>

[thomasjo]

@simurai Immediate response is that they are types. If that's a bit too specific, I'd probably use the term construct as opposed to entity.

Naming Stuff is Hard™

[simurai]

Thanks. 🙇 Changed it to type.

<span class="icon icon-type-array">array</span>
<span class="icon icon-type-boolean">boolean</span>