Nes.css: More icons

[JMGama]

Is there any way we can get more social-media icons? Like Gmail, Youtube, and phone number? :heart:
Or how can i make it?

• [X] Medium
• [X] Twitch
• [X] Google
• [X] Youtube
• [x] Phone

[DanceParty]

@JMGama They are made using the box-shadow property in CSS. Take a look at the source code for examples on how the current ones are made :)

Also not sure how @BcRikko feels about adding icons? I have just built a Medium icon and think it would be nice to have.

[BcRikko]

You can make icon as below 🛠

// color list
$icon-like-colors: (#fff, #333, #2e77be);

// Numbers represent the position and color of pixel.
//    0: transparent
//    1: First color of $icon-like-colors (in this case, #fff)
//    2: Second color of $icon-like-colors (in this case, #333)
//    3: Third color of $icon-like-colors (in this case, #2e77be)
$icon-like: (
  (0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0),
  (0,0,0,0,0,0,0,2,2,0,0,0,0,0,0,0),
  (0,0,0,0,0,0,0,2,1,2,0,0,0,0,0,0),
  (0,0,0,0,0,0,0,2,1,2,0,0,0,0,0,0),
  (0,0,0,0,0,0,2,1,1,2,0,0,0,0,0,0),
  (0,0,0,0,0,0,2,1,1,2,2,2,2,2,2,0),
  (0,0,0,0,0,2,1,1,1,1,1,1,1,1,1,2)
....

Please refer to below.

• https://github.com/BcRikko/NES.css/blob/master/scss/icons/icons.scss
• https://github.com/BcRikko/NES.css/blob/master/scss/icons/like.scss

[BcRikko]

I welcome adding icons 👍

but The icon increases the size of CSS file. 😭
so I might divide the icons into different project -> #59

[guastallaigor]

What do you guys think of this? Not sure if it's ok.

This supposed to be a youtube icon.

[BcRikko]

💯 🙆 🎉

[guastallaigor]

This linkedin one looks a lot uglier but not sure how to improve it.

[BcRikko]

@guastallaigor How is this? 🤔
https://www.brik.co/blogs/pixel-art/linkedin-pixel-art-1

[guastallaigor]

Like this?

[BcRikko]

Like this 😆

$icon-linkedin: (
  (0,2,2,2,2,2,2,2,2,2,2,2,2,2,2,0),
  (2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2),
  (2,2,1,1,1,2,2,2,2,2,2,2,2,2,2,2),
  (2,2,1,1,1,2,2,2,2,2,2,2,2,2,2,2),
  (2,2,1,1,1,2,2,2,2,2,2,2,2,2,2,2),
  (2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2),
  (2,2,1,1,1,2,1,1,1,2,1,1,1,2,2,2),
  (2,2,1,1,1,2,1,1,1,1,1,1,1,1,2,2),
  (2,2,1,1,1,2,1,1,1,1,1,1,1,1,2,2),
  (2,2,1,1,1,2,1,1,1,1,2,1,1,1,2,2),
  (2,2,1,1,1,2,1,1,1,2,2,1,1,1,2,2),
  (2,2,1,1,1,2,1,1,1,2,2,1,1,1,2,2),
  (2,2,1,1,1,2,1,1,1,2,2,1,1,1,2,2),
  (2,2,1,1,1,2,1,1,1,2,2,1,1,1,2,2),
  (2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2),
  (0,2,2,2,2,2,2,2,2,2,2,2,2,2,2,0),
);

Would it be better not to resemble the image just before? 🤔
because this Image is not free... 😢

[JMGama]

I did the scss but don't understand what i need to change or add in the css :disappointed:

[BcRikko]

1. create icon matrix and color list( like this )
2. import {youricon}.scss into icons.scss
3. Define a css class ( like this )
4. add example icon to index.html
5. build css ( npm run build )

I think that it will be showing. 🤔

[guastallaigor]

Like this 😆

$icon-linkedin: (
  (0,2,2,2,2,2,2,2,2,2,2,2,2,2,2,0),
  (2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2),
  (2,2,1,1,1,2,2,2,2,2,2,2,2,2,2,2),
  (2,2,1,1,1,2,2,2,2,2,2,2,2,2,2,2),
  (2,2,1,1,1,2,2,2,2,2,2,2,2,2,2,2),
  (2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2),
  (2,2,1,1,1,2,1,1,1,2,1,1,1,2,2,2),
  (2,2,1,1,1,2,1,1,1,1,1,1,1,1,2,2),
  (2,2,1,1,1,2,1,1,1,1,1,1,1,1,2,2),
  (2,2,1,1,1,2,1,1,1,1,2,1,1,1,2,2),
  (2,2,1,1,1,2,1,1,1,2,2,1,1,1,2,2),
  (2,2,1,1,1,2,1,1,1,2,2,1,1,1,2,2),
  (2,2,1,1,1,2,1,1,1,2,2,1,1,1,2,2),
  (2,2,1,1,1,2,1,1,1,2,2,1,1,1,2,2),
  (2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2),
  (0,2,2,2,2,2,2,2,2,2,2,2,2,2,2,0),
);

Would it be better not to resemble the image just before? 🤔
because this Image is charged... 😢

This looks better than mine, when you can add this icon ok 👍

[JMGama]

This is the Gmail icon i made :smile:

$icon-gmail-colors: (#eeecec, #fd2b2b);
$icon-gmail: (
  ( 0,2,1,1,1,1,1,1,1,1,1,1,1,1,2,0 ),
  ( 2,2,2,1,1,1,1,1,1,1,1,1,1,2,2,2 ),
  ( 2,2,2,2,1,1,1,1,1,1,1,1,2,2,2,2 ),
  ( 2,2,2,2,2,1,1,1,1,1,1,2,2,2,2,2 ),
  ( 2,2,2,2,2,2,1,1,1,1,2,2,2,2,2,2 ),
  ( 2,2,2,1,2,2,2,1,1,2,2,2,1,2,2,2 ),
  ( 2,2,2,1,1,2,2,2,2,2,2,1,1,2,2,2 ),
  ( 2,2,2,1,1,1,2,2,2,2,1,1,1,2,2,2 ),
  ( 2,2,2,1,1,1,1,2,2,1,1,1,1,2,2,2 ),
  ( 2,2,2,1,1,1,1,1,1,1,1,1,1,2,2,2 ),
  ( 2,2,2,1,1,1,1,1,1,1,1,1,1,2,2,2 ),
  ( 2,2,2,1,1,1,1,1,1,1,1,1,1,2,2,2 ),
  ( 2,2,2,1,1,1,1,1,1,1,1,1,1,2,2,2 ),
  ( 2,2,2,1,1,1,1,1,1,1,1,1,1,2,2,2 ),
  ( 2,2,2,1,1,1,1,1,1,1,1,1,1,2,2,2 ),
  ( 0,2,2,1,1,1,1,1,1,1,1,1,1,2,2,0 )
);

[BcRikko]

Good 👍

I fixed it a little bit. 🛠

$icon-gmail-colors: (#eeecec, #fd2b2b);
// prettier-ignore
$icon-gmail: (
  (0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0),
  (0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0),
  (2,2,1,1,1,1,1,1,1,1,1,1,1,1,2,2),
  (2,2,2,1,1,1,1,1,1,1,1,1,1,2,2,2),
  (2,2,2,2,1,1,1,1,1,1,1,1,2,2,2,2),
  (2,2,1,2,2,1,1,1,1,1,1,2,2,1,2,2),
  (2,2,1,1,2,2,1,1,1,1,2,2,1,1,2,2),
  (2,2,1,1,1,2,2,1,1,2,2,1,1,1,2,2),
  (2,2,1,1,1,1,2,2,2,2,1,1,1,1,2,2),
  (2,2,1,1,1,1,1,2,2,1,1,1,1,1,2,2),
  (2,2,1,1,1,1,1,1,1,1,1,1,1,1,2,2),
  (2,2,1,1,1,1,1,1,1,1,1,1,1,1,2,2),
  (2,2,1,1,1,1,1,1,1,1,1,1,1,1,2,2),
  (2,2,1,1,1,1,1,1,1,1,1,1,1,1,2,2),
  (0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0),
  (0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0)
);

[jjspace]

I would recommend rounding the corners of that gmail logo a bit. It would match the actual logo better and be more in line with the style of all the others you've created

[evexoio]

This issue is to vague, I would like to add a phone icon and close this issue, we'll always accept icons. We're working on NES.icons for that.

[BcRikko]

:tada: This issue has been resolved in version 1.0.0 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: