Enhancement: for JavaScript files, used filled icon, not outlined icon #334
Conversation
The previous icon used for JavaScript-family files was the [default Mfizz JavaScript icon](http://fizzed.com/oss/font-mfizz/icon-javascript), which is a square icon with the letters "JS" in the bottom-right corner. The problem with this is that the outline is thin and the letters small, leading to a weak, hard-to-discern icon, especially at smaller sizes and on light backgrounds. This 'outline-style' icon also doesn't follow the style of most other icons set by the file-icons package, which are usually filled blocks, making the JS and even harder to identify at a glance, as well as looking out-of-place. This commit changes the icon used for JavaScript-family files to be the [Mfizz "JavaScript Alt" icon](http://fizzed.com/oss/font-mfizz/icon-javascript-alt), which is exactly like the standard JavaScript icon, except the square is filled-in, rather than being an outline. This icon is a lot easier to identify at a glance, and is more in keeping with the style of the other icons set by file-icons. Since it comes from the same font family as the previous JS icon, it also has minimal stylistic changes from the previous icon, beyond filling-in the square. The icon manually has its `font-size` set to `large` (from the `.mf` default of `small`) to more closely match the size of the other file icons (12px vs. 14px in height; most other icons are around 15px).
|
Preview: Old Icons New Icons |
|
I'm inclined to agree with you. However, I'm a little hesitant to make a change to something that many users are probably already very used to seeing, especially for a language as popular as JavaScript. It also breaks the similarity between the old JS icons and those of derived languages: TypeScript and JSX. I'm not so sure... paging @DanBrooker and @ckross01 for feedback. |
|
@Alhadis @DanBrooker @ckross01: Any updates on merging this PR? Open to feedback/changes. |
|
Well... personally, I'm not a fan of unexpected aesthetic changes. Chances are, most users who dislike the existing icon have already overridden it in their stylesheets. There's also the issue of it contrasting style-wise with the solid-filled icons for React and TypeScript, so the change would still look inconsistent. |
|
@Alhadis if it's a problem, I could update the React and TypeScript icons to match the new JS icon style. I agree in general that unexpected aesthetic changes aren't ideal, but the other option is never changing an icon at all once it's created. The new icon here has the same design/shape/color as the existing one, it just fills part of the shape with the icon color, rather than leaving it as just an outline. That seems about as mild a design change as possible. It's the same icon, just more visible/legible. It's also more in keeping with the standard "JavaScript" icon, which has a solid yellow square with black "JS" letters in it. |
|
V2 will introduce a much, much nicer and friendly way of customising icons and colours, so that'd probably be the best time to change the JS icons, to be honest. |
|
Got it, makes sense. Is there any place where I can see the changes planned for V2? |
|
No, not yet. I haven't published the branch yet, and it's suffering dozens of conflicts with recent updates at the moment. Suffice to say it'll be well worth it in the end, though. |
|
You can subscribe here for updates. =) |
|
@int3h I've opened a dedicated task-list to track progress for V2. I'm closing this as I'll make the change to the default JS icon myself... it'll be a good opportunity to describe for users the new/simpler procedure for changing icons. =) I appreciate the contribution, BTW. I hate closing pull requests without merging them. |
This presents a good opportunity to illustrate the simpler customisation
process. Users can restore the old outlined icons in their stylesheets:
.js-icon:before { content: "\f128"; }
.jsx-icon:before { content: "\f101"; }
.ts-icon:before { content: "\e912"; }
.tsx-icon:before { content: "\e9d1"; }
Alhadis
added
discuss
The current icon used for JavaScript-family files was the default Mfizz JavaScript icon, which is a square icon with the letters "JS" in the bottom-right corner. The problem with this is that the outline is thin and the letters small, leading to a weak, hard-to-discern icon, especially at smaller sizes and on light backgrounds. This 'outline-style' icon also doesn't follow the style of most other icons set by the file-icons package, which are usually filled blocks, making the JS and even harder to identify at a glance, as well as looking out-of-place.
This pull request changes the icon used for JavaScript-family files to be the Mfizz "JavaScript Alt" icon, which is exactly like the standard JavaScript icon, except the square is filled-in, rather than being an outline. This icon is a lot easier to identify at a glance, and is more in keeping with the style of the other icons set by file-icons. Since it comes from the same font family as the previous JS icon, it also has minimal stylistic changes from the previous icon, beyond filling-in the square.
The icon manually has its
font-sizeset tolarge(from the.mfdefault ofsmall) to more closely match the size of the other file icons (12px vs. 14px in height; most other icons are around 15px).