Vscode-icons: Custom Icons for Angular 2 files

[alejandrocoding]

Hi there,
this is a great plugin, thanks for it.

I just thought that it would be nice to have angular icons for angular convention names for certain files. Take a look to this plugin:
https://marketplace.visualstudio.com/items?itemName=davidbabel.vscode-simpler-icons

Just for the angular conventions as I said, let's say component.ts, directive.ts, pipe.ts, service.ts and so on.

What do you think?

[robertohuertasm]

Hi @ialex90,

thanks for posting this suggestion here. I think it's a great idea. Maybe we could provide not only the Angular icon but the Angular Icon with the TS icon, too. As we do with specs.ts and so on. I'll show you once I have the icons and l'll be glad to hear your thougths about it. 😉

[JimiC]

I have added this in my TODO list.

[JimiC]

Reopening as I'm going to suggest a different set of icons that will be language agnostic.

[robertohuertasm]

Why language agnostics? I want to see a difference between different language implementations. Let's see I'm using typescript and I've got my compilled js files not hidden how I would be able to distinguish them if they happen to be in the same folder?

[JimiC]

In this case you wouldn't. I see your point. Still I would like each extension to have a diff color than the original.

[robertohuertasm]

Do you mean that you don't like the component.(ts|js) icon?

[JimiC]

OOOhhhh. They do have diff colors. Damn. Have to remind myself to be more thorough.
Still there is something about the yellow and blue versions. Having JS and TS with the same colors, doesn't fit well.

[JimiC]

I also use the extension .model.ts in my projects. Do you mind if we add a colored version for that too?

[alejandrocoding]

I personally think that they should not add model.ts as this is a personal pattern instead of generic pattern and it could be used on others frameworks/projects or personal patterns.

I think it could be good to add routing.ts and *-routing.module.ts as they do appear as a pattern to follow on the angular doc. (Maybe routing.ts is used in other frameworks so not sure if it's a good idea)

[JimiC]

I agree with -routing.module.ts / -routing.module.js. Will ditch .model.ts.

[robertohuertasm]

I will make another release with this included and the fonts rasterized tomorrow.

[robertohuertasm]

Hey guys, just a problem here that I missed before. VSCode icon api doesn't support globs so -routing.module.ts is not possible to create. 😞 We could make it for `app-routing.module.(ts|js) as a filename. What do you think?

[JimiC]

Can't the - in -routing.module.ts qualify as an extension? Only dot does?

[JimiC]

While we are at it what about icons for the Dart version?

[jens1o]

What's the different between the official and the icon we use(except ours is in png)?

[robertohuertasm]

@JimiC, unfortunately, only dots... I don't think they will provide globs in a near future, that would require to change their implementation in a drastical way.

[JimiC]

Guys, what about those icons?

Component

Icons Removed

Directive

Icons Removed

Module

Icons Removed

Pipe

Icons Removed

Service

Icons Removed

[JimiC]

@robertohuertasm See I kept your original palette of colors expect the blue-ish.

[robertohuertasm]

Can you provide a screenshoot? Just to see how they look with the size and background 😄

[robertohuertasm]

I'm afraid that with the border the letters will be even more unreadable.

[JimiC]

Unfortunately I headed to bed. Will do so tomorrow. I also have an icon for routing but didn't link it. It's in the Samples folder at my fork.

[robertohuertasm]

No problem. I will try to make it now. Just one thing I've noticed is that I can't see any thumbnail of the icons you provide (see the attachment). What tool are you using? In case it's 'Illustrator' which version? Do you use the export method or the save as...?

[robertohuertasm]

The screenshoot with your icons:

[robertohuertasm]

Side by side:

[robertohuertasm]

Sure I'm biased 😉 but I prefer the yellow color for the js letters. Even in the yellow (for js) and blue (for ts) it's not important that we see the letters. Just the stain of color is enough to wire our brain into the type. Another thing I would say is that the TS letters in @JimiC 's proposal are above the A core line hiding it. But that's my opinion and I'm trying to defend my choice here 😁

For the moment, I will publish them as they are just to solve the issue with the rasterized font. Then will discuss it further if you feel like it.

[alejandrocoding]

That does not look better unfortunately :) I think for me it's better without the borders.

The left column for me it's better also in terms of colors and shadows and TS|JS sizes. The only thing I would change is, the color of app-routing.module, cause is nicer than the module.ts (purple than yellow) So I would switch them as module file is much more used file than the only one instance of app-routing.module, but just an opinion.

Did you include routing.ts as well? We have those files on angular projects too, so if it is possible would be cool.

btw, thanks both @robertohuertasm and @JimiC ;)

[robertohuertasm]

@ialex90 your proposal seems reasonable. I'll buy it. 😝

[alejandrocoding]

Hahaha perfect ;)

El 11 dic. 2016 10:28 p. m., "Roberto Huertas" [e-mail]
escribió:

@ialex90 https://github.com/ialex90 your proposal seems reasonable.
I'll buy it. 😝

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/robertohuertasm/vscode-icons/issues/437#issuecomment-266313145,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AFfSmTazKIaUvdn1NHaNGScf6uLj-RMpks5rHHkIgaJpZM4KtrBR
.

[JimiC]

Morning, guys. Sure the black JS doesn't do justice and the JS|TS indeed need to be a little lower.

I may have lost the battle but not the war. Yarrrrr (Just kidding).

@robertohuertasm To answer your question. I use Illustrator CC 2015 with Export for Screens.

[JimiC]

@robertohuertasm Originally I couldn't see any thumbnails of the SVG icons, but I installed SVG Explorer Extension and now they are there.

I figured out why they don't show up correctly. They require the styling to be inline. I'll try to produce the SVG again to compensate the issue.

[JimiC]

Hey guys. I'm back with a new batch. How about those:

@robertohuertasm Don't get me wrong. I'm not trying to push __my__ version. Just trying to perfect the outcome.

P.S. I tried to keep the tone difference between the left and right side of the original Angular icon in the altered colored ones.

[robertohuertasm]

Hi! I'm not sure of liking the idea of adding the angular icon for html and css files. We may then also create another one for sass and less...

Besides that, I still like more my colors and the size of the subicon (I put the right side of the icon a little bit darker to make the subicons more visible).

What do the rest of you think about it?

[alejandrocoding]

Hi there,

I like the original one more, with the half icon shadow looks better I think. I actually thought to ask for the angular icons for html and scss, but now, I just realized that it's confuse cause the advantage of this plugin is even not looking or paying too much attention to the files, the icon indicates you which kind of file it is, and adding those for angular you'll probably have to pay more attention to see properly the correct file. I don't think is better than the normal html5/scss/css icon file.

Anyway, just my opinion, thanks @JimiC for the effort, is great.

[JimiC]

Fine.