Skypecon

A library enabling the Skypecon catalog site to showcase all the Skype icons in their full, native quality. The usage is web-friendly and leverages all the webby things we love like CSS for animations, retina support, etc.

Usage

You're better off playing around with the different options. But if you want some documentation, here ya go: define an HTML <i> tag with a class of sc and one sc-[icon] type. Then alter its behavior with at most one option from each set:

• Animation

  • sc-hover - only animate on hover
  • sc-still - prevents the animation (will override sc-hover)

• Animation speed

  • sc-slow - Reduces to ~20fps
  • sc-fast - Increases to ~40fps

• Size

  • sc-2x - Shows the icon at twice the size (40px). Has no effect on retina screens.
  • sc-4x - Coming soon

Notice

This library was created with the utmost respect for the people responsible for the icons at Skype and exists to properly showcase their work (while allowing some flexibility in its demonstration as well).

There are many sites around the web that also catalog the emoticons and flags that are available in Skype, (especially for the popular hidden ones), however, none show the icons in their best potential quality (both in resolution and smoothness in the animation) of how they are shown within the Skype application. Not to mention they aren't driven by the community and don't appear easy to maintain or to scale well.

Skype plug

The Skype team really hits a sweet spot in the set of icons they offer, achieving all of the following:

1. accurate expression/emotion captured (avoids miscommojication)
2. sufficient variety
3. appropriate animations
4. correct level of "cuteness"

I think other emoticons available today fail in at least one of these criteria. The Emoji set is popular but doesn't offer animation and has an over-whelming number of options. For example, I feel the following emotions don't warrant different icons:

• tongue: 😝 😛 😜
• kiss: 😗 😙 😚 😘
• smile: 😄 😃 😀 😌 😬 😁
• laughing: 😆 😆
• worried: 😟 😣
• surprised: 😧 😦 😵 😮 😯
• indifferent: 😐 😑 😕
• cry: 😭 😢 😓 😫 😖 😩 😰 😥 😪
• sad: 😔 😞

License

The icons were not made by me - they are the property of Skype and should be used according to their license and usage terms. All the other code is my own work and is licensed under the MIT License.

Changelog

v1.4.10

• Added special limited edition emoticons from the Captain America movie promotion (blackwidow, bucky, captain, nickfury, shielddeflect)

v1.4.9

• Added the tauri hidden icon

v1.4.8

• Added hidden icons which had been available on Windows but not Mac until v6.15 (bike, cat, dog, idea, sheep, skype, talktothehand)
• Image files processed with imagemin
• Catalog of all emoticons in a YAML datastore

v1.4.6

• Bumped versioning up to catch up with more accurate representation of features available (a lot of the features were added in the proof of concept)

v0.5.3

• Fixed "playing too fast" bug on retina screens
• Fixed "white content" bug on retina screens
• Using sprite for when the non-animated images are shown (.sc-still & .sc-hover)
• Other improvements for better management of Less files

v0.5.2

• Fixed hover bug on for non-retina hover
• Reduced output CSS file by ~20%

v0.5.1

• Added necessary vendor prefixes

v0.5.0

• POC already supported the following features:
  • Change animation speeds with .sc-slow & .sc-fast
  • Only animate on hover with .sc-hover
  • Enlarge to twice the size (40px) with .sc-2x
  • Prevent animation altogether with .sc-still