Coder Social home page Coder Social logo

dota2-chat-emoticons's Introduction

Dota 2 Chat Emoticons

The recently added Dota 2 Chat Emoticons from the compendium stretch goal as GIF and CSS animation for the use on your website/forum/etc.

Demo (GIF)

32x32px

:wink: :blush: :cheeky: :cool: :crazy: :cry: :disapprove: :doubledamage: :facepalm: :happytears: :haste: :hex: :highfive: :huh: :hush: :illusion: :invisibility: :laugh: :rage: :regeneration: :sad: :sick: :sleeping: :smile: :surprise: :aaaah: :burn: :hide: :iceburn: :tears: :techies: :fail: :goodjob: :headshot: :heart: :horse: :grave: :ti4copper: :ti4bronze: :ti4silver: :ti4gold: :ti4platinum: :ti4diamond: :dac15_blush: :dac15_surprise: :dac15_cool: :dac15_duel: :dac15_frog: :dac15_face: :dac15_nosewipe: :dac15_stab: :dac15_transform: :pup: :bts_bristle: :bts_godz: :bts_lina: :bts_merlini: :bts_rosh: :cocky: :devil: :happy: :thinking: :tp: :salty: :angel: :blink: :snot: :stunned: :disappear: :fire: :bountyrune: :troll: :gross: :ggdire: :ggradiant: :yolo: :throwgame: :aegis2015: :eyeroll: :charm_blush: :charm_cheeky: :charm_cool: :charm_crazy: :charm_cry: :charm_disapprove: :charm_facepalm: :charm_happytears: :charm_highfive: :charm_huh: :charm_hush: :charm_laugh: :charm_rage: :charm_sad: :charm_sick: :charm_sleeping: :charm_surprise: :charm_wink: :charm_smile: :charm_onlooker: :eaglesong_2015: :wrath: :snowman: :healed: :drunk: :trophy_2016: :pa_kiss: :arcane_rune: :fuming: :axe_laugh: :dizzy: :zipper: :blush_smile: :nervous: :surprise_blush: :luna_love: :dead_eyes: :giff: :thumbs_up: :thumbs_down: :money: :unicorn: :naga_song: :poop: :aegis_2016: :tear: :reaver_2016: :bc_100: :bc_fire: :bc_ok: :bc_check: :bc_eyes: :bc_frog: :bc_flex: :cocky_ti6_charm: :devil_ti6_charm: :happy_ti6_charm: :thinking_ti6_charm: :tp_ti6_charm: :angel_ti6_charm: :hex_ti6_charm: :snot_ti6_charm: :stunned_ti6_charm: :disappear_ti6_charm: :fire_ti6_charm: :gross_ti6_charm: :yolo_ti6_charm: :throwgame_ti6_charm: :eyeroll_ti6_charm: :lifestealer_ti6_charm: :heal_ti6_charm: :drunk_ti6_charm: :salty_ti6_charm: :chicken_ti6_charm: :legion_commander_t16_charm: :underlord_ti6_charm: :monkey_king_ti6_charm: :fall_2016_trophy: :jugg: :no: :recharge: :dunno: :exclamation: :venom: :brood_love: :darkmoon_chicken: :bladeform_legacy: :grimace: :aegis_2017: :gem: :plant: :relieved: :foggy: :eh: :flex: :gg: :donkey: :kiss2: :observer_ward: :lick: :laugh2: :sentry_ward: :whew: :gyro: :nerd: :confounded: :joke: :siltbreaker: :mischief: :heykid: :huff: :beg: :kisskiss: :snort: :sweat: :chuckle: :stars: :wait: :sleep: :bawl: :team_eg: :team_eg_silver: :team_eg_gold: :team_dc: :team_dc_silver: :team_dc_gold: :team_ehome: :team_ehome_silver: :team_ehome_gold: :team_exe: :team_exe_silver: :team_exe_gold: :team_mvp: :team_mvp_silver: :team_mvp_silver: :team_nb: :team_nb_silver: :team_nb_gold: :team_og: :team_og_silver: :team_og_gold: :team_wings: :team_wings_silver: :team_wings_gold: :team_af: :team_af_silver: :team_af_gold: :team_complexity: :team_complexity_silver: :team_complexity_gold: :team_faceless: :team_faceless_silver: :team_faceless_gold: :team_igv: :team_igv_silver: :team_igv_gold: :team_lfy: :team_lfy_silver: :team_lfy_gold: :team_cloud9: :team_cloud9_silver: :team_cloud9_gold: :team_vp: :team_vp_silver: :team_vp_gold: :team_wg: :team_wg_silver: :team_wg_gold: :team_lgd: :team_lgd_silver: :team_lgd_gold: :team_liquid: :team_liquid_silver: :team_liquid_gold: :team_ig: :team_ig_silver: :team_ig_gold: :team_infamous: :team_infamous_silver: :team_infamous_gold: :team_tnc: :team_tnc_silver: :team_tnc_gold: :team_fnatic: :team_fnatic_silver: :team_fnatic_gold: :team_secret: :team_secret_silver: :team_secret_gold: :team_hellraisers: :team_hellraisers_silver: :team_hellraisers_gold: :team_empire: :team_empire_silver: :team_empire_gold:

(24x24px and 16x16px variants also included)

Installation & Usage

Just copy the assets folder into your project and refer to the corresponding gifs in your HTML.

To use the CSS animation version with the PNGs embed the assets/stylesheets/dota2-chat-emoticons.css into your HTML and use like this:

<i class="d2ce wink"></i>
<i class="d2ce blush"></i>
<i class="d2ce cheeky"></i>
...

Recommendation: For highest quality, use the CSS Animation since PNG supports alpha.

Update Workflow

In case Valve adds more emoticons:

You will need graphicscmagick/imagemagick (apt-get install graphicsmagick on Debian/Ubuntu) and Ruby (get it e.g. via rvm.io) to run the generator.

  1. Extract the emoticon source images from the VPK using a tool such as https://github.com/SteamDatabase/ValveResourceFormat. The source image are inside panorama/images/emoticons.
  2. Export an environment variable EMOTICON_SRC that points to this folder.
  3. Run bundle to get the required packages for the generator
  4. Run ruby generator.rb. By default, this command will not regenerate existing emoticons. Use the --regenerate flag if all emoticons need to be regenerated.

Important: If you plan to update this README, update the file src/README.md.eruby since the README will be generated from it

All game images and names are property of Valve Corporation.

dota2-chat-emoticons's People

Contributors

bontscho avatar cyborgmatt avatar d-chen avatar manveru avatar watbe avatar

Watchers

avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.